网站暗黑模式切换器

Greasy Fork is available in English.
网站暗黑模式切换器

一键切换网站暗黑/日间模式，基于CSS滤镜实现
当前为 2025-07-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         网站暗黑模式切换器
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  一键切换网站暗黑/日间模式，基于CSS滤镜实现
// @author       [email protected]
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 检查本地存储的模式偏好
    const isDarkMode = localStorage.getItem('darkMode') === 'true';

    // 创建切换按钮
    const toggleBtn = document.createElement('button');
    toggleBtn.style.position = 'fixed';
    toggleBtn.style.right = '20px';
    toggleBtn.style.bottom = '20px';
    toggleBtn.style.zIndex = '9999';
    toggleBtn.style.padding = '10px 15px';
    toggleBtn.style.border = 'none';
    toggleBtn.style.borderRadius = '20px';
    toggleBtn.style.cursor = 'pointer';
    toggleBtn.style.fontWeight = 'bold';
    toggleBtn.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';

    // 应用初始模式
    function applyMode(dark) {
        const html = document.documentElement;
        if (dark) {
            html.style.filter = 'invert(1) hue-rotate(180deg)';
            toggleBtn.textContent = '🌞 日间模式';
            toggleBtn.style.backgroundColor = '#fff';
            toggleBtn.style.color = '#000';
        } else {
            html.style.filter = 'none';
            toggleBtn.textContent = '🌙 暗黑模式';
            toggleBtn.style.backgroundColor = '#333';
            toggleBtn.style.color = '#fff';
        }
        // 处理媒体元素复原
        document.querySelectorAll('img, video, iframe, svg, canvas, .avatar, .logo, .icon').forEach(el => {
            el.style.filter = dark ? 'invert(1) hue-rotate(180deg)' : 'none';
        });
        localStorage.setItem('darkMode', dark);
    }

    // 绑定切换事件
    toggleBtn.addEventListener('click', () => {
        const current = localStorage.getItem('darkMode') === 'true';
        applyMode(!current);
    });

    // 初始化
    document.body.appendChild(toggleBtn);
    applyMode(isDarkMode);
})();