Dark Mode

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

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

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

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==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)
    );
  }
})();