前言
你是否厌倦了在系统开启深色模式后，打开 B 站却依然被刺眼的白色闪瞎？
B 站其实有测试版的深色模式，但它不会自动跟随系统设置。这个脚本就是为了解决这个问题而生。
它是一个轻量级的 Tampermonkey/脚本猫 脚本，核心功能是 实时监听 你系统或浏览器的深浅色模式设置 prefers-color-scheme），并自动为 B 站页面根元素添加或移除 bili_dark 类名，从而完美触发 B 站的深色模式。
核心功能一览
系统同步： 完美跟随操作系统或浏览器的深浅色模式设置。
实时监听： 监听系统模式变化，无需刷新页面即可切换。
防抖优化： 监视 B 站自身对类名的修改，确保深色模式的稳定性。
轻量高效： 代码简洁
document-start运行，确保页面加载时即刻生效。
如何使用
脚本猫都用过吧，导入下面的脚本
// ==UserScript==
// @name B站跟随系统深色模式
// @namespace https://www.anye.xyz/
// @version 1.0
// @description 根据系统或浏览器深浅色模式自动触发B站测试版深色模式
// @author Anye
// @match *://*.bilibili.com/*
// @match *://bilibili.com/*
// @run-at document-start
// ==/UserScript==
(function () {
'use strict';
const TARGET_CLASS = 'bili_dark';
// 检测系统/浏览器暗色模式
function isDarkMode() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// 移除暗色类
function removeBiliDark() {
const el = document.documentElement;
if (el && el.classList.contains(TARGET_CLASS)) {
el.classList.remove(TARGET_CLASS);
console.info('[脚本] 已移除 bili_dark');
}
}
// 添加暗色类
function addBiliDark() {
const el = document.documentElement;
if (el && !el.classList.contains(TARGET_CLASS)) {
el.classList.add(TARGET_CLASS);
console.info('[脚本] 已添加 bili_dark');
}
}
// 根据当前系统模式设置
function applyMode() {
if (isDarkMode()) {
addBiliDark();
} else {
removeBiliDark();
}
}
// 页面初始立即应用
applyMode();
// 监听系统深浅色模式变化
if (window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyMode);
}
// 监视B站自己修改类名
const observer = new MutationObserver(() => {
applyMode();
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
})();
脚本解析
整个脚本的核心逻辑非常清晰，主要围绕以下几个步骤展开：
1. 定义目标类名： const TARGET_CLASS = 'bili_dark'; 这是 B 站深色模式的触发开关。
2. 判断系统模式： isDarkMode() 函数利用 window.matchMedia('(prefers-color-scheme: dark)') 来获取当前系统的深浅色偏好。
3. 应用模式： applyMode() 函数根据 isDarkMode() 的结果，调用 addBiliDark() 或 removeBiliDark() 来操作 <html> 元素的 class 列表。
4. 即时生效： applyMode() 在脚本加载后立即执行一次，确保页面初次加载时即为正确模式。
5. 监听变化（系统）： 通过 window.matchMedia(...).addEventListener('change', applyMode) 监听系统设置的实时变化，实现无需刷新页面的动态切换。
6. 监听变化（B站内部）： 使用 MutationObserver 监视 <html> 元素的 class 属性变化。这是为了防止 B 站自身的 JavaScript 逻辑在页面加载后移除或添加 bili_dark 类名，从而保证脚本设置的持久性。
通过这种方式，我们确保了 B 站的深色模式能够 完全且稳定地 跟随你的系统设置。