☰

Dark Mode Toggle (Mobile Manual)

Enable dark mode with a toggle button

  1. // ==UserScript==
  2. // @name         Dark Mode Toggle (Mobile Manual)
  3. // @version      0.0.4
  4. // @description  Enable dark mode with a toggle button
  5. // @namespace    https://greasyfork.org/en/users/28298
  6. // @author       https://greasyfork.org/en/users/28298
  7. // @homepage     https://greasyfork.org/en/scripts/523876
  8. // @license      MIT
  9. // @match        *://*/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. // original author: Michael Wang https://greasyfork.org/en/scripts/472251-dark-mode/code
  14. // with help of claude ai
  15.  
  16. (function () {
  17.     // Create style element for dark mode
  18.     const darkStyle = document.createElement('style');
  19.     darkStyle.textContent = `
  20.         html {
  21.             filter: invert(1) hue-rotate(180deg) contrast(0.8);
  22.         }
  23.         /** reverse filter for media elements */
  24.         img, video, picture, canvas, iframe, embed {
  25.             filter: invert(1) hue-rotate(180deg);
  26.         }
  27.     `;
  28.  
  29.     // Initialize based on page's current state
  30.     let darkMode = false; // Start with no filter
  31.     const pageIsDark = document.documentElement.classList.contains('dark');
  32.  
  33.     // Create toggle button
  34.     const button = document.createElement('button');
  35.     button.innerHTML = pageIsDark ? '☼' : '☽';
  36.     button.style.position = 'fixed';
  37.     button.style.bottom = '10px';
  38.     button.style.left = '15px';
  39.     button.style.zIndex = '1000';
  40.     button.style.background = 'none';
  41.     button.style.border = 'none';
  42.     button.style.fontSize = '24px';
  43.     button.style.cursor = 'pointer';
  44.     button.style.color = 'inherit';
  45.  
  46.     // Toggle dark mode on button click
  47.     button.addEventListener('click', () => {
  48.         darkMode = !darkMode;
  49.         if (darkMode) {
  50.             document.head.appendChild(darkStyle);
  51.             button.innerHTML = pageIsDark ? '☽' : '☼';
  52.         } else {
  53.             document.head.removeChild(darkStyle);
  54.             button.innerHTML = pageIsDark ? '☼' : '☽';
  55.         }
  56.     });
  57.  
  58.     document.body.appendChild(button);
  59. })();