您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
支持每个网站独立记忆主题状态的暗黑模式切换脚本,含管理面板。
// ==UserScript== // @name 主题切换 // @namespace http://tampermonkey.net/ // @version 0.0.1 // @description 支持每个网站独立记忆主题状态的暗黑模式切换脚本,含管理面板。 // @author 石小石Orz // @match *://*/* // @license MIT // @run-at document-body // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @grant GM_deleteValue // @grant GM_listValues // @grant GM_deleteValues // @grant GM_registerMenuCommand // @noframes // ==/UserScript== (function () { 'use strict'; // 当前网站的主机名,例如 www.example.com const hostname = location.hostname; // 当前网站的主题存储键名 const STORAGE_KEY = `theme-${hostname}`; // 全局前缀,用于匹配所有网站主题设置 const GLOBAL_KEY_PREFIX = 'theme-'; // 获取当前网站的暗黑主题状态,默认为 false(亮色) let isDark = GM_getValue(STORAGE_KEY, false); // 注入 CSS 样式,实现暗黑模式效果和管理面板样式 GM_addStyle(` html.dark-mode { filter: invert(0.92) hue-rotate(180deg); background: #111 !important; } html.dark-mode img, html.dark-mode video { filter: invert(1) hue-rotate(180deg); } #theme-manager { position: fixed; top: 10%; left: 50%; transform: translateX(-50%); background: #fff; color: #000; padding: 10px; border: 2px solid #666; z-index: 999999; width: 90%; max-width: 500px; font-size: 14px; border-radius: 10px; box-shadow: 0 0 10px #00000080; } #theme-manager table { width: 100%; border-collapse: collapse; margin-top: 10px; } #theme-manager th, #theme-manager td { border: 1px solid #ccc; padding: 5px; } #theme-manager button { padding: 2px 5px; border-radius: 3px; } `); // 初始化页面主题(根据是否为暗黑模式) updateTheme(); function updateTheme() { // 切换或应用 dark-mode 类 document.documentElement.classList.toggle('dark-mode', isDark); } // 注册(不可用)菜单项:切换当前网站主题 GM_registerMenuCommand("主题切换", () => { isDark = !isDark; // 状态取反 updateTheme(); // 应用新的主题状态 GM_setValue(STORAGE_KEY, isDark); // 保存设置 alert(`已切换为 ${isDark ? '暗黑' : '亮色'} `); }); // 注册(不可用)菜单项:网站主题管理 GM_registerMenuCommand('📋 网站主题管理', async () => { const allKeys = await GM_listValues(); // 获取所有 GM 存储的键 const siteThemes = []; // 过滤出以 theme- 开头的键,即主题设置 for (const key of allKeys) { if (key.startsWith(GLOBAL_KEY_PREFIX)) { const host = key.slice(GLOBAL_KEY_PREFIX.length); // 提取主机名 const val = await GM_getValue(key); // 获取主题状态 siteThemes.push({ host, val }); } } // 显示管理面板 showThemeManager(siteThemes); }); // 显示主题管理弹窗 function showThemeManager(data) { const existing = document.getElementById('theme-manager'); if (existing) existing.remove(); // 若已有面板先移除 const div = document.createElement('div'); div.id = 'theme-manager'; // 构造弹窗 HTML 结构 div.innerHTML = ` <div style="display:flex;align-items:center;justify-content:space-between;"> <span style="font-size:17px">🌐 网站主题管理</span> <span style="cursor:pointer;" onclick="closeThemeManager()">❌</span> </div> <table> <thead> <tr><th>网站</th><th>当前主题</th><th>操作</th></tr> </thead> <tbody> ${data.map(item => ` <tr data-host="${item.host}"> <td>${item.host}</td> <td style="display:flex;align-items:center;justify-content:center"> <button onclick="toggleThemeForHost('${item.host}', this)" style="background:#409eff"> ${item.val ? '🌙 暗黑' : '🌞 亮色'} </button> </td> <td style="width:60px"> <button onclick="deleteThemeForHost('${item.host}', this)" style="background:#f56c6c;margin-left:15px">删除</button> </td> </tr>`).join('')} </tbody> </table> <div style="margin-top:10px;display:flex;justify-content:flex-end;"> <button onclick="resetAllThemes()">重置所有</button> </div> `; document.body.appendChild(div); // 添加到页面中 } // 以下函数挂载到 unsafeWindow,以便 HTML 中能调用 // 关闭管理弹窗 unsafeWindow.closeThemeManager = function () { document.getElementById('theme-manager')?.remove(); }; // 切换指定网站的主题状态 unsafeWindow.toggleThemeForHost = function (host, btn) { const key = `${GLOBAL_KEY_PREFIX}${host}`; const current = GM_getValue(key, false); // 当前状态 const next = !current; GM_setValue(key, next); // 更新为新状态 btn.textContent = next ? '🌙 暗黑' : '🌞 亮色'; // 如果是当前站点,立即更新主题状态 if (location.hostname === host) { isDark = next; updateTheme(); } }; // 删除指定网站的主题记录 unsafeWindow.deleteThemeForHost = function (host, btn) { const key = `${GLOBAL_KEY_PREFIX}${host}`; GM_deleteValue(key); // 删除存储项 btn.closest('tr')?.remove(); // 从表格中移除行 // 若为当前站点,则还原为亮色模式 if (location.hostname === host) { isDark = false; updateTheme(); } }; // 重置所有网站的主题设置 unsafeWindow.resetAllThemes = function () { if (confirm('确认删除所有网站的主题记录吗?')) { const keys = GM_listValues(); // 获取所有键 GM_deleteValues(keys); // 批量删除 isDark = false; updateTheme(); closeThemeManager(); } }; })();
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址