在任何网页上切换夜间模式，使用filter方案，不破坏原有样式
// ==UserScript==
// @name 通用夜间模式切换器
// @namespace http://tampermonkey.net/
// @version 1.0.1
// @description 在任何网页上切换夜间模式，使用filter方案，不破坏原有样式
// @author Llldmiao
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addStyle
// @run-at document-start
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const VERSION = '1.0.1';
// 配置项
const CONFIG = {
storageKey: 'darkModeEnabled',
positionKey: 'darkModeButtonPosition',
attributeName: 'data-dark-mode',
filterValue: 'brightness(0.5)', // 降低亮度实现夜间模式
transitionDuration: '0.3s',
buttonSize: '48px',
defaultPosition: { bottom: 20, right: 20 },
buttonZIndex: 99999,
dragThreshold: 5 // 拖动阈值（像素）
};
// 全局状态管理
let stylesInjected = false;
let eventListeners = {
mousemove: null,
mouseup: null,
touchmove: null,
touchend: null
};
let mutationObserver = null;
// 添加样式（防止重复注入）
function addStyles() {
if (stylesInjected) return;
stylesInjected = true;
const css = `
/* 基础夜间模式样式 - 直接在html上应用brightness降低亮度 */
html[${CONFIG.attributeName}="true"] {
filter: ${CONFIG.filterValue} !important;
transition: filter ${CONFIG.transitionDuration} ease !important;
}
/* 滚动条样式优化 - WebKit内核浏览器 (Chrome, Safari, Edge) */
html[${CONFIG.attributeName}="true"]::-webkit-scrollbar,
html[${CONFIG.attributeName}="true"] body::-webkit-scrollbar {
width: 12px !important;
height: 12px !important;
}
html[${CONFIG.attributeName}="true"]::-webkit-scrollbar-track,
html[${CONFIG.attributeName}="true"] body::-webkit-scrollbar-track {
background: #1a1a1a !important;
}
html[${CONFIG.attributeName}="true"]::-webkit-scrollbar-thumb,
html[${CONFIG.attributeName}="true"] body::-webkit-scrollbar-thumb {
background: #4a4a4a !important;
border-radius: 6px !important;
border: 2px solid #1a1a1a !important;
}
html[${CONFIG.attributeName}="true"]::-webkit-scrollbar-thumb:hover,
html[${CONFIG.attributeName}="true"] body::-webkit-scrollbar-thumb:hover {
background: #5a5a5a !important;
}
html[${CONFIG.attributeName}="true"]::-webkit-scrollbar-thumb:active,
html[${CONFIG.attributeName}="true"] body::-webkit-scrollbar-thumb:active {
background: #6a6a6a !important;
}
html[${CONFIG.attributeName}="true"]::-webkit-scrollbar-corner,
html[${CONFIG.attributeName}="true"] body::-webkit-scrollbar-corner {
background: #1a1a1a !important;
}
/* 滚动条样式优化 - Firefox */
html[${CONFIG.attributeName}="true"],
html[${CONFIG.attributeName}="true"] body {
scrollbar-width: thin !important;
scrollbar-color: #4a4a4a #1a1a1a !important;
}
/* 切换按钮样式 */
.dark-mode-toggle-btn {
position: fixed !important;
width: ${CONFIG.buttonSize} !important;
height: ${CONFIG.buttonSize} !important;
border-radius: 50% !important;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95)) !important;
backdrop-filter: blur(10px) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
cursor: move !important;
z-index: ${CONFIG.buttonZIndex} !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important;
color: #fff !important;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4), 0 0 0 0 rgba(102, 126, 234, 0.4) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
user-select: none !important;
-webkit-user-select: none !important;
touch-action: none !important;
}
.dark-mode-toggle-btn:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1)) !important;
transform: scale(1.1) !important;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6), 0 0 0 8px rgba(102, 126, 234, 0.1) !important;
}
.dark-mode-toggle-btn:active {
transform: scale(0.95) !important;
cursor: grabbing !important;
}
.dark-mode-toggle-btn.dragging {
transition: none !important;
cursor: grabbing !important;
opacity: 0.9 !important;
}
/* 夜间模式拖动时保持更高亮度 */
html[${CONFIG.attributeName}="true"] .dark-mode-toggle-btn.dragging {
opacity: 1 !important;
}
/* 夜间模式下的按钮样式 - 按钮图标需要保持正常亮度，背景色和日间模式一样 */
html[${CONFIG.attributeName}="true"] .dark-mode-toggle-btn {
background: linear-gradient(135deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1)) !important;
border-color: rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 6px 30px rgba(102, 126, 234, 0.8), 0 0 0 0 rgba(102, 126, 234, 0.5) !important;
}
html[${CONFIG.attributeName}="true"] .dark-mode-toggle-btn:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1)) !important;
box-shadow: 0 10px 40px rgba(102, 126, 234, 1), 0 0 0 12px rgba(102, 126, 234, 0.2) !important;
transform: scale(1.15) !important;
}
`;
if (typeof GM_addStyle !== 'undefined') {
GM_addStyle(css);
} else {
const style = document.createElement('style');
style.textContent = css;
(document.head || document.documentElement).appendChild(style);
}
}
// 获取存储的状态
function getStoredState() {
if (typeof GM_getValue !== 'undefined') {
return GM_getValue(CONFIG.storageKey, false);
}
try {
const stored = localStorage.getItem(CONFIG.storageKey);
return stored === 'true';
} catch (e) {
return false;
}
}
// 保存状态
function saveState(enabled) {
if (typeof GM_setValue !== 'undefined') {
GM_setValue(CONFIG.storageKey, enabled);
} else {
try {
localStorage.setItem(CONFIG.storageKey, enabled.toString());
} catch (e) {
console.warn('无法保存夜间模式状态:', e);
}
}
}
// 获取按钮位置
function getButtonPosition() {
if (typeof GM_getValue !== 'undefined') {
return GM_getValue(CONFIG.positionKey, CONFIG.defaultPosition);
}
try {
const stored = localStorage.getItem(CONFIG.positionKey);
return stored ? JSON.parse(stored) : CONFIG.defaultPosition;
} catch (e) {
return CONFIG.defaultPosition;
}
}
// 保存按钮位置
function saveButtonPosition(position) {
if (typeof GM_setValue !== 'undefined') {
GM_setValue(CONFIG.positionKey, position);
} else {
try {
localStorage.setItem(CONFIG.positionKey, JSON.stringify(position));
} catch (e) {
console.warn('无法保存按钮位置:', e);
}
}
}
// 切换夜间模式
function toggleDarkMode() {
const html = document.documentElement;
const currentState = html.getAttribute(CONFIG.attributeName) === 'true';
const newState = !currentState;
html.setAttribute(CONFIG.attributeName, newState.toString());
saveState(newState);
// 更新按钮图标
updateButtonIcon(newState);
return newState;
}
// 应用夜间模式状态
function applyDarkModeState(enabled) {
const html = document.documentElement;
html.setAttribute(CONFIG.attributeName, enabled.toString());
updateButtonIcon(enabled);
}
// 移除事件监听器
function removeEventListeners() {
if (eventListeners.mousemove) {
document.removeEventListener('mousemove', eventListeners.mousemove);
eventListeners.mousemove = null;
}
if (eventListeners.mouseup) {
document.removeEventListener('mouseup', eventListeners.mouseup);
eventListeners.mouseup = null;
}
if (eventListeners.touchmove) {
document.removeEventListener('touchmove', eventListeners.touchmove);
eventListeners.touchmove = null;
}
if (eventListeners.touchend) {
document.removeEventListener('touchend', eventListeners.touchend);
eventListeners.touchend = null;
}
}
// 创建切换按钮
function createToggleButton() {
// 先移除旧的事件监听器，防止泄漏
removeEventListeners();
const button = document.createElement('div');
button.className = 'dark-mode-toggle-btn';
button.setAttribute('role', 'button');
button.setAttribute('aria-label', '切换夜间模式');
button.setAttribute('title', '点击切换，拖动调整位置');
// 初始图标
const isDarkMode = getStoredState();
button.textContent = isDarkMode ? '☀️' : '🌙';
// 设置初始位置
const position = getButtonPosition();
applyButtonPosition(button, position);
// 拖动相关变量
let isDragging = false;
let startX, startY;
let startLeft, startTop;
let hasMoved = false;
// 通用拖动处理函数
function handleDragMove(clientX, clientY) {
if (!isDragging) return;
const deltaX = clientX - startX;
const deltaY = clientY - startY;
// 判断是否真的在拖动（移动超过阈值）
if (Math.abs(deltaX) > CONFIG.dragThreshold || Math.abs(deltaY) > CONFIG.dragThreshold) {
hasMoved = true;
}
// 计算新位置
let newLeft = startLeft + deltaX;
let newTop = startTop + deltaY;
// 边界检测
const buttonSize = parseInt(CONFIG.buttonSize);
newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - buttonSize));
newTop = Math.max(0, Math.min(newTop, window.innerHeight - buttonSize));
button.style.left = newLeft + 'px';
button.style.top = newTop + 'px';
button.style.right = 'auto';
button.style.bottom = 'auto';
}
// 通用拖动结束处理函数
function handleDragEnd() {
if (!isDragging) return;
isDragging = false;
button.classList.remove('dragging');
// 如果移动了，保存位置；否则触发点击
if (hasMoved) {
const rect = button.getBoundingClientRect();
const newPosition = {
left: rect.left,
top: rect.top,
right: window.innerWidth - rect.right,
bottom: window.innerHeight - rect.bottom
};
saveButtonPosition(newPosition);
} else {
// 没有拖动，触发点击切换
toggleDarkMode();
}
}
// 鼠标按下
button.addEventListener('mousedown', (e) => {
e.preventDefault();
isDragging = true;
hasMoved = false;
startX = e.clientX;
startY = e.clientY;
const rect = button.getBoundingClientRect();
startLeft = rect.left;
startTop = rect.top;
button.classList.add('dragging');
});
// 鼠标移动（保存引用）
eventListeners.mousemove = (e) => handleDragMove(e.clientX, e.clientY);
document.addEventListener('mousemove', eventListeners.mousemove);
// 鼠标释放（保存引用）
eventListeners.mouseup = handleDragEnd;
document.addEventListener('mouseup', eventListeners.mouseup);
// 触摸开始
button.addEventListener('touchstart', (e) => {
e.preventDefault();
isDragging = true;
hasMoved = false;
const touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
const rect = button.getBoundingClientRect();
startLeft = rect.left;
startTop = rect.top;
button.classList.add('dragging');
});
// 触摸移动（保存引用）
eventListeners.touchmove = (e) => {
const touch = e.touches[0];
handleDragMove(touch.clientX, touch.clientY);
};
document.addEventListener('touchmove', eventListeners.touchmove, { passive: false });
// 触摸结束（保存引用）
eventListeners.touchend = handleDragEnd;
document.addEventListener('touchend', eventListeners.touchend);
// 添加到页面（使用 fallback）
const container = document.body || document.documentElement;
container.appendChild(button);
return button;
}
// 应用按钮位置
function applyButtonPosition(button, position) {
// 优先使用 bottom/right，如果没有则使用 top/left
if (position.bottom !== undefined && position.right !== undefined) {
button.style.bottom = position.bottom + 'px';
button.style.right = position.right + 'px';
button.style.top = 'auto';
button.style.left = 'auto';
} else if (position.top !== undefined && position.left !== undefined) {
button.style.top = position.top + 'px';
button.style.left = position.left + 'px';
button.style.bottom = 'auto';
button.style.right = 'auto';
} else {
button.style.bottom = CONFIG.defaultPosition.bottom + 'px';
button.style.right = CONFIG.defaultPosition.right + 'px';
}
}
// 更新按钮图标
function updateButtonIcon(isDarkMode) {
const button = document.querySelector('.dark-mode-toggle-btn');
if (button) {
button.textContent = isDarkMode ? '☀️' : '🌙';
}
}
// 快捷键支持
function setupKeyboardShortcut() {
document.addEventListener('keydown', (e) => {
// Ctrl+Shift+D 或 Cmd+Shift+D (Mac)
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'D') {
e.preventDefault();
e.stopPropagation();
toggleDarkMode();
}
}, true);
}
// 节流函数
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (timer) return;
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
};
}
// 清理资源
function destroy() {
try {
// 移除按钮
const button = document.querySelector('.dark-mode-toggle-btn');
if (button) {
button.remove();
}
// 移除事件监听器
removeEventListeners();
// 停止 MutationObserver
if (mutationObserver) {
mutationObserver.disconnect();
mutationObserver = null;
}
console.log(`[夜间模式] v${VERSION} 已卸载`);
} catch (error) {
console.error('[夜间模式] 卸载失败:', error);
}
}
// 立即添加样式（在页面渲染前）
addStyles();
// 立即应用夜间模式状态（在页面渲染前）
// 这样可以避免从亮色闪到暗色的问题
(function applyDarkModeImmediately() {
const isDarkMode = getStoredState();
if (isDarkMode) {
// 立即在 documentElement 上设置属性
if (document.documentElement) {
document.documentElement.setAttribute(CONFIG.attributeName, 'true');
}
}
})();
// 初始化
function init() {
try {
console.log(`[夜间模式] v${VERSION} 初始化中...`);
// 等待DOM加载完成
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
// 确保状态正确应用
applyDarkModeState(getStoredState());
createToggleButton();
setupKeyboardShortcut();
setupSPAListener();
console.log(`[夜间模式] v${VERSION} 已加载`);
});
} else {
// 确保状态正确应用
applyDarkModeState(getStoredState());
createToggleButton();
setupKeyboardShortcut();
setupSPAListener();
console.log(`[夜间模式] v${VERSION} 已加载`);
}
} catch (error) {
console.error('[夜间模式] 初始化失败:', error);
}
}
// 设置 SPA 路由监听（优化性能）
function setupSPAListener() {
let lastUrl = location.href;
// 使用节流的 URL 检查函数
const checkUrlChange = throttle(() => {
const url = location.href;
if (url !== lastUrl) {
lastUrl = url;
// 确保按钮存在
if (!document.querySelector('.dark-mode-toggle-btn')) {
createToggleButton();
}
// 重新应用状态
applyDarkModeState(getStoredState());
}
}, 1000);
// 监听 popstate 和 pushstate 事件（更高效的 SPA 检测）
window.addEventListener('popstate', checkUrlChange);
// 拦截 pushState 和 replaceState
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;
history.pushState = function(...args) {
originalPushState.apply(this, args);
checkUrlChange();
};
history.replaceState = function(...args) {
originalReplaceState.apply(this, args);
checkUrlChange();
};
// 作为后备方案，使用节流的 MutationObserver
mutationObserver = new MutationObserver(checkUrlChange);
mutationObserver.observe(document.body || document.documentElement, {
childList: true,
subtree: false // 只监听直接子元素，减少性能开销
});
}
// 立即执行初始化
init();
// 暴露清理方法到全局（可选，便于调试）
if (typeof window !== 'undefined') {
window.darkModeDestroy = destroy;
}
})();