From f183c2b7d63e23c11431a70d05f7bcfa366f2f0b Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 13 May 2024 15:38:36 -0400 Subject: [PATCH] darkmode colors are properly flipped/readable --- tdx-enhanced.js | 99 +++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 87 insertions(+), 12 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 4b8b413..47d5fc9 100644 --- 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); +} + `