☰

Dark Mode Toggle

dark mode using inversion, double-hit Esc for toggle button

// ==UserScript==
// @name          Dark Mode Toggle
// @namespace     https://github.com/Alistair1231/my-userscripts/
// @version       0.3.0
// @description   dark mode using inversion, double-hit Esc for toggle button
// @author        Alistair1231
// @license       GPL-3.0
// @match         *://*/*
// @run-at        document-start
// @grant         GM.addStyle
// ==/UserScript==
// https://github.com/Alistair1231/my-userscripts/blob/master/dark-mode-toggle.user.js
// https://greasyfork.org/en/scripts/530023-dark-mode-toggle

(function () {
  "use strict";

  const CONFIG = {
    inversionPercent: 90,
    mediaInversionPercent: 100,
    uiTimeout: 3000,
    doublePressDelay: 500,
  };

  let isActive = false;
  let lastEscPress = 0;
  let uiTimeout;
  let btn = null;
  const style = `
          html {
              -webkit-filter: invert(${CONFIG.inversionPercent}%);
              filter: invert(${CONFIG.inversionPercent}%);
              background-color: white;
          }
          img, video, iframe, object, embed, canvas, svg {
              -webkit-filter: invert(${CONFIG.mediaInversionPercent}%);
              filter: invert(${CONFIG.mediaInversionPercent}%);
          }
      `;

  // Run initial setup immediately
  init();

  // Wait for DOM to be ready before creating the button
  document.addEventListener("DOMContentLoaded", () => {
    createButton();
  });

  // ! 
  // ! Functions
  // !
  // Function to create the toggle button
  function createButton() {
    if (!btn) {
      btn = document.createElement("button");
      btn.textContent = "🌓 Toggle Dark Mode";
      btn.style.cssText = `
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 2147483647 !important;
          padding: 8px 12px;
          cursor: pointer;
          border-radius: 4px;
          background: #fff;
          color: #333;
          box-shadow: 0 2px 5px rgba(0,0,0,0.2);
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s ease;
      `;
      btn.addEventListener("click", () => {
        if (window.localStorage.darkMode === "true") {
          window.localStorage.darkMode = false;
        } else if (window.localStorage.darkMode === "false") {
          window.localStorage.darkMode = true;
        } else {
          window.localStorage.darkMode = true;
        }
        window.location.reload();
      });
      document.body.appendChild(btn);
    }
  }

  function handleEscPress() {
    const now = Date.now();
    if (now - lastEscPress < CONFIG.doublePressDelay) {
      showToggleUI();
    }
    lastEscPress = now;
  }

  function showToggleUI() {
    clearTimeout(uiTimeout);
    if (btn) {
      btn.style.visibility = "visible";
      btn.style.opacity = "1";
    }
    uiTimeout = setTimeout(() => {
      if (btn) {
        btn.style.opacity = "0";
        setTimeout(() => {
          btn.style.visibility = "hidden";
        }, 300);
      }
    }, CONFIG.uiTimeout);
  }

  // Initial setup that can run immediately
  function init() {
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") handleEscPress();
    });

    // Check localStorage and apply dark mode if needed
    if (window.localStorage.darkMode === "true") {
        GM.addStyle(style);
    }
  }
})();