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