Dark Mode

A userscript to enable dark mode by changing white elements to black and inverting the text color on all websites.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name          Dark Mode
// @namespace     http://tampermonkey.net/
// @version       1.0
// @description   A userscript to enable dark mode by changing white elements to black and inverting the text color on all websites.
// @match         *://*/*
// @author        kiwv
// @grant         none
// @license       MIT
// ==/UserScript==

(function() {
  'use strict';

  // Keep track of the dark mode state
  let isDarkMode = true;

  // Apply dark mode initially
  applyDarkMode();

  // Function to apply dark mode
  function applyDarkMode() {
    const elements = document.querySelectorAll('*');
    for (let i = 0; i < elements.length; i++) {
      const element = elements[i];

      // Invert text color
      const color = window.getComputedStyle(element).color;
      const backgroundColor = window.getComputedStyle(element).backgroundColor;

      if (isDarkMode) {
        // Invert text color and change white elements to black
        if (color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent') {
          element.style.color = invertColor(color);
        }
        if (
          backgroundColor === 'rgb(255, 255, 255)' ||
          backgroundColor === 'rgba(255, 255, 255, 0)'
        ) {
          element.style.backgroundColor = '#000';
        }
      }
    }

    // Toggle the document body background color
    document.body.style.backgroundColor = isDarkMode ? '#000' : '';
  }

  // Helper function to invert color
  function invertColor(color) {
    const hexColor = colorToHex(color);
    const invertedHexColor = (Number(`0x1${hexColor}`) ^ 0xffffff)
      .toString(16)
      .substr(1);
    return `#${invertedHexColor}`;
  }

  // Helper function to convert color to hex format
  function colorToHex(color) {
    const rgb = color.match(/\d+/g);
    return (
      ((1 << 24) | (rgb[0] << 16) | (rgb[1] << 8) | Number(rgb[2]))
        .toString(16)
        .slice(1)
    );
  }
})();