百度翻译深色模式切换插件

插件简介

这是一个为百度翻译网页版开发的油猴脚本插件，用于实现深色模式和浅色模式的自由切换，提供更好的夜间使用体验。

功能特点

• 一键切换深色/浅色模式
• 适配百度翻译所有页面，目前只为 https://fanyi.baidu.com/mtpe-individual/transText#/
• 自动保存用户偏好设置
• 精心优化的深色模式样式
• 美观的悬浮切换按钮
• 直观的月亮/太阳图标指示当前模式

安装方法

步骤1：安装油猴插件

首先需要在浏览器中安装油猴（Tampermonkey）插件：

• Chrome/Edge：在应用商店搜索 "Tampermonkey" 并安装
• Firefox：在附加组件商店搜索 "Tampermonkey" 并安装
• Safari：在 App Store 搜索 "Tampermonkey" 并安装

步骤2：安装脚本

1. 打开油猴插件的管理面板
2. 点击 "添加新脚本"
3. 将 baidu-translate-dark-mode.user.js 文件的内容复制到编辑器中
4. 点击 "文件" → "保存" 或使用快捷键 Ctrl+S 保存脚本
5. 确保脚本已启用

使用说明

1. 访问百度翻译页面（如：https://fanyi.baidu.com/mtpe-individual/transText#/）
2. 在页面右侧中部会出现一个圆形的月亮图标按钮
3. 点击该按钮即可切换深色/浅色模式
4. 切换后，图标会相应地变为太阳/月亮，表示当前模式
5. 刷新页面或再次访问时，会自动恢复上次的模式设置 (油猴脚本的存储API)

代码结构解析

脚本元数据

// ==UserScript==
// @name         百度翻译深色模式切换
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  为百度翻译添加深色模式切换功能
// @author       Your Name
// @match        https://fanyi.baidu.com/*
// @match        https://fanyi.baidu.com/mtpe-individual/transText#/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=baidu.com
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

• @name：脚本名称
• @namespace：脚本命名空间
• @version：脚本版本
• @description：脚本描述
• @match：匹配的URL，支持百度翻译所有页面
• @grant：请求的权限，用于存储用户设置

核心功能实现

1. 深色模式CSS样式

const darkModeCSS = `
    /* 深色模式基础样式 */
    .dark-mode {
        filter: invert(1) hue-rotate(180deg);
    }
    
    /* 图片不反转 */
    .dark-mode img,
    .dark-mode video,
    .dark-mode svg,
    .dark-mode canvas {
        filter: invert(1) hue-rotate(180deg);
    }
    
    /* 其他具体元素样式... */
`;

• 使用CSS filter 属性实现快速深色模式
• 针对图片等媒体元素单独处理，避免反转
• 对具体元素进行样式优化，提升视觉体验

2. 切换按钮创建

const createToggleButton = () => {
    const button = document.createElement('button');
    button.innerHTML = '🌙';
    button.style.cssText = `
        position: fixed;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
        /* 其他样式... */
    `;
    
    // 点击事件处理
    button.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const isDarkMode = document.body.classList.contains('dark-mode');
        button.innerHTML = isDarkMode ? '☀️' : '🌙';
        
        // 保存设置
        GM_setValue('darkMode', isDarkMode);
    });
    
    return button;
};

• 创建悬浮的圆形切换按钮
• 实现点击事件处理，切换深色/浅色模式
• 动态改变按钮图标
• 保存用户设置到油猴存储中

3. 初始化函数

const init = () => {
    // 添加切换按钮
    const toggleButton = createToggleButton();
    document.body.appendChild(toggleButton);
    
    // 恢复之前的设置
    const isDarkMode = GM_getValue('darkMode', false);
    if (isDarkMode) {
        document.body.classList.add('dark-mode');
        toggleButton.innerHTML = '☀️';
    }
};

• 添加切换按钮到页面
• 从油猴存储中恢复之前的设置
• 初始化按钮状态

4. 页面加载处理

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}

• 确保页面加载完成后再执行初始化
• 兼容不同的页面加载状态

实现原理

1. CSS类切换：通过给 body 元素添加/移除 dark-mode 类来实现深色模式的切换
2. CSS Filter + 具体样式：结合CSS filter: invert(1) hue-rotate(180deg) 和具体元素样式，实现快速且美观的深色模式
3. 油猴存储API：使用 GM_setValue 和 GM_getValue 保存和恢复用户设置
4. DOM操作：动态创建切换按钮并添加到页面
5. 事件监听：监听按钮点击事件，实现模式切换

浏览器兼容性

• ✅ Chrome 60+
• ✅ Microsoft Edge 79+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Opera 47+

更新日志

v1.0 (2025-12-08)

• 初始版本发布
• 实现深色模式切换功能
• 添加悬浮切换按钮
• 支持设置持久化
• 优化深色模式样式

自定义修改

修改切换按钮位置

可以修改 createToggleButton 函数中的样式来调整按钮位置：

button.style.cssText = `
    position: fixed;
    right: 50px;  // 水平位置，可调整数值
    top: 50%;     // 垂直位置，可调整为具体像素值
    // 其他样式...
`;

修改深色模式样式

可以编辑 darkModeCSS 常量中的CSS样式来自定义深色模式效果：

const darkModeCSS = `
    .dark-mode body {
        background-color: #000 !important;  // 修改背景色
    }
    
    .dark-mode .trans-input {
        color: #fff !important;  // 修改文本色
    }
    
    // 其他样式修改...
`;

问题反馈

如果在使用过程中遇到问题，欢迎反馈：

1. 检查浏览器控制台是否有错误信息
2. 确认油猴插件和脚本已正确安装并启用
3. 确认当前页面URL匹配百度翻译域名

许可证

MIT License

贡献

欢迎提交Issue和Pull Request来改进这个脚本！