☰

Dark Mode Toggle (Mobile Manual)

Enable dark mode with a toggle button

当前为 2025-01-15 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Dark Mode Toggle (Mobile Manual)
// @version      0.0.1
// @description  Enable dark mode with a toggle button
// @namespace    https://greasyfork.org/en/users/28298
// @author       https://greasyfork.org/en/users/28298

// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==
 
// original author: Michael Wang https://greasyfork.org/en/scripts/472251-dark-mode/code
// with help of claude ai
 
(function () {
    // Create style element for dark mode
    const darkStyle = document.createElement('style');
    darkStyle.textContent = `
        html {
            filter: invert(1) hue-rotate(180deg) contrast(0.8);
        }
        /** reverse filter for media elements */
        img, video, picture, canvas, iframe, embed {
            filter: invert(1) hue-rotate(180deg);
        }
    `;
 
    // Initialize based on page's current state
    let darkMode = false; // Start with no filter
    const pageIsDark = document.documentElement.classList.contains('dark');
 
    // Create toggle button
    const button = document.createElement('button');
    button.innerHTML = pageIsDark ? '☼' : '☽';
    button.style.position = 'fixed';
    button.style.top = '5px';
    button.style.right = '10px';
    button.style.zIndex = '1000';
    button.style.background = 'none';
    button.style.border = 'none';
    button.style.fontSize = '24px';
    button.style.cursor = 'pointer';
    button.style.color = 'inherit';
 
    // Toggle dark mode on button click
    button.addEventListener('click', () => {
        darkMode = !darkMode;
        if (darkMode) {
            document.head.appendChild(darkStyle);
            button.innerHTML = pageIsDark ? '☽' : '☼';
        } else {
            document.head.removeChild(darkStyle);
            button.innerHTML = pageIsDark ? '☼' : '☽';
        }
    });
 
    document.body.appendChild(button);
})();