Last active
September 14, 2026 16:07
-
-
Save cjbayliss/258b409395702efaba3a0a9794c6cea0 to your computer and use it in GitHub Desktop.
dark-mode.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name dark-mode | |
| // @match *://*/* | |
| // @grant none | |
| // @version 1.1 | |
| // @author cjb | |
| // @run-at document-start | |
| // ==/UserScript== | |
| const adjustColors = () => { | |
| const elements = document.querySelectorAll("*"); | |
| elements.forEach((element) => { | |
| const computedStyle = window.getComputedStyle(element); | |
| const colorRGB = computedStyle["color"].match(/\d+/g).map(Number); | |
| const borderColorRGB = computedStyle["borderColor"] | |
| .match(/\d+/g) | |
| .map(Number); | |
| const bgRGB = computedStyle["backgroundColor"].match(/\d+/g).map(Number); | |
| if (colorRGB.length == 3 && colorRGB.reduce((x, y) => x + y) / 3 <= 120) { | |
| element.style.setProperty( | |
| "color", | |
| `hsl(from rgb(${colorRGB[0]} ${colorRGB[1]} ${colorRGB[2]}) h s 80%)`, | |
| "important", | |
| ); | |
| } | |
| if (borderColorRGB.length == 3) { | |
| element.style.setProperty( | |
| "border-color", | |
| `hsl(from rgb(${borderColorRGB[0]} ${borderColorRGB[1]} ${borderColorRGB[2]}) h s 30%)`, | |
| "important", | |
| ); | |
| } | |
| if (bgRGB.length == 3 && bgRGB.reduce((x, y) => x + y) / 3 >= 127) { | |
| element.style.setProperty( | |
| "background-color", | |
| `hsl(from rgb(${bgRGB[0]} ${bgRGB[1]} ${bgRGB[2]}) h s 10%)`, | |
| "important", | |
| ); | |
| } | |
| element.style.setProperty("box-shadow", "unset", "important"); | |
| element.style.setProperty("text-shadow", "unset", "important"); | |
| if (window.location.hostname.toString().includes("amazon")) { | |
| element.style.setProperty("mix-blend-mode", "unset", "important"); | |
| } | |
| }); | |
| }; | |
| adjustColors(); | |
| // an interval timer is less resource intensive on complex sites like amazon | |
| const intervalID = setInterval(adjustColors, 250); | |
| setTimeout(() => { | |
| clearInterval(intervalID); | |
| }, 5.0 * 1000); | |
| setInterval(adjustColors, 1000); // run every second after |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
EDIT: it now (2024-10-5 AEST) works in Greasemonkey
IDK why, but it doesn't work in *monkey addons. I guess there is something that is allowed in the developer console that isn't allowed for addons. Example screenshot if you run it from the developer console on wikipedia.org