dark-mode.js

dark-mode.js

// ==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

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

Thanks, it's a helpful tool for nighttime browsing.

I have three suggestions:

1. Try to display elements like div, hr, etc., in a grey shade, at least. Currently, it's turning everything completely black.
2. Could you create an alternative version that isn’t entirely dark? Maybe use a background color like #757575 and text similar to #FFFAB0.
3. You can also consider publishing this on Greasy Fork.