darkmode colors are properly flipped/readable

ECN · May 13, 2024 · f183c2b · f183c2b
1 parent 537323d
commit f183c2b
Showing 1 changed file with 87 additions and 12 deletions.
diff --git a/tdx-enhanced.js b/tdx-enhanced.js
@@ -1,11 +1,12 @@
 // ==UserScript==
 // @name         tdx-enhanced
 // @namespace    ecn
-// @version      2024-05-08-01
+// @version      2024-05-13-01
 // @description  enhanced tdx coloring & formatting. follows system color scheme.
 // @author       Purdue STEM IT - it@purdue.edu
 // @match        https://service.purdue.edu/TDNext/*
 // @require      https://momentjs.com/downloads/moment.min.js
+// @require      https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.6.0/tinycolor.min.js
 // @downloadURL  https://raw.github.itap.purdue.edu/ECN/tdx-userscript/main/tdx-enhanced.js
 // @updateURL    https://raw.github.itap.purdue.edu/ECN/tdx-userscript/main/tdx-enhanced.js
 // @grant        GM.addStyle
@@ -71,6 +72,8 @@
         '~~': {style: {background: 'var(--col-highlight-2)'}, type: 'highlight', re: new RegExp("\~~ (.*) \~~","g")},
     }
 
+    var colorScheme
+
     /* BEGIN FUNCTIONS */
 
     function updateHeading(mutation,numItems,totalItems) {
@@ -125,7 +128,8 @@
         }
     }
 
-    function parseTicket() {
+    function parseTicket(mutation=null) {
+
         let qBlock = document.querySelector("#ctlAttribute2285")
         let header = document.getElementById("thTicket_spnTitle")
 
@@ -136,7 +140,7 @@
         }
 
         //add queue tag to ticket title
-        if (qBlock) {
+        if (qBlock && !document.querySelector(".qBox")) {
             let qElement = qBlock.querySelector("span.wrap-text")
             let qTxt = qElement.innerText
 
@@ -157,6 +161,58 @@
 
             header.appendChild(newBox)
         }
+
+        var feedItems
+
+        if (mutation) {
+            feedItems = mutation
+        } else {
+            feedItems = document.querySelectorAll("#ttDescription")
+        }
+
+        if (feedItems) {
+            for (const feedItem of feedItems) {
+                [...feedItem.querySelectorAll("*[style*='color']")].forEach(feedElement=>{
+                    let color = tinycolor(feedElement.style.color)
+                    let brightness = color.getBrightness()
+                    //console.warn("ELEMENT:",feedElement)
+                    //console.log("Brightness:",brightness)
+
+                    //if color is too dark
+                    if (brightness < 100 && colorScheme == "darkMode") {
+
+                        var newColor
+                        var isGrey = true
+                        let rgb = color.toRgb()
+
+                        if (rgb.r == rgb.b && rgb.r == rgb.g) {
+                            isGrey = true
+                        } else {
+                            isGrey = false
+                        }
+
+                        //if color is shade of grey
+                        if (isGrey) {
+                            let flippedColor = tinycolor(invertHex(color.spin(180).toHex()))
+                            newColor = flippedColor
+                            //console.log(feedElement.innerText,"is grey")
+                        } else {
+                            let threshold = 50
+                            let diff = (threshold - brightness) + brightness
+                            newColor = color.brighten(diff)
+                            //console.log(feedElement.innerText,"is a color")
+                        }
+                        //console.log("oldColor:",color.toHex(),"newColor:",newColor.toHex())
+
+                        feedElement.style.color = newColor.toHexString()
+                    }
+                });
+            }
+        }
+    }
+
+    function invertHex(hex) {
+      return (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase()
     }
 
     function parseTable(mutation) {
@@ -371,11 +427,16 @@
     let observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             let t = mutation.target
-            //console.log("Mutation:",t)
+            //console.log("Mutation:",mutation)
             if (t.classList.contains("ModuleContent")) {
                 parseTable(mutation)
             }
 
+            //parse the feed if it updates
+            if (t.classList.contains("feed")) {
+                parseTicket(mutation.addedNodes)
+            }
+
             //search whole document, frames may reset when reopened
             let frames = document.querySelectorAll("iframe")
             if (frames) {
@@ -415,6 +476,7 @@
             mode = "auto"
         }
         console.log("Set color mode to",mode)
+        colorScheme = mode
         var storageMode = mode
 
         let autoScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode"
@@ -489,9 +551,9 @@
         }
     }
 
-    parseTicket()
     changeTitle()
     checkColorMode()
+    parseTicket()
 
     const customStyles = `
 
@@ -874,6 +936,11 @@ div.feed-child-box {
 	background-color: var(--bg-3) !important;
 }
 
+.code, code, pre {
+    background-color: var(--bg-1);
+    color: var(--txt-1);
+}
+
 .modal-content {
 	background-color: var(--bg-2);
 }
@@ -959,21 +1026,18 @@ div.feed-child-box {
 
 /* Replies */
 #ttDescription, .feed-item-text {
-	color: #000;
-	filter: invert(var(--txt-invert)) hue-rotate(var(--txt-hue));
+	/* color: var(--txt-2); */
 }
 
-#ttDescription img, .feed-item-text img {
-	filter: invert(var(--txt-invert)) hue-rotate(var(--txt-hue));
+.feed-item-text *[style*="color: #000000"], #ttDescription *[style*="color: #000000"] {
+    /* color: var(--txt-1) !important; */
 }
 
 .moreToggle button, .lessToggle button {
 	background-color: var(--col-0);
-    filter: invert(var(--txt-invert)) hue-rotate(var(--txt-hue));
 }
 
 #ttDescription a, .feed-item-text a {
-	filter: invert(var(--txt-invert)) hue-rotate(var(--txt-hue));
 }
 
 .cke_editable {
@@ -987,7 +1051,6 @@ div.feed-child-box {
 
 .cke_button_icon {
 	opacity: 1 !important;
-	filter: invert(var(--txt-invert)) !important;
 }
 
 .cke_combo_text {
@@ -1462,6 +1525,18 @@ div.comment {
 	border: 1px solid var(--border-0);
 }
 
+div.feed-child-box {
+	border: 1px solid var(--border-0) !important;
+}
+
+blockquote {
+    border-left: 5px solid var(--bg-4);
+}
+
+.code, code, pre {
+    border: 1px solid var(--bg-4);
+}
+
 
     `