B站跟随系统深色模式脚本——让你的B站体验更丝滑

前言

你是否厌倦了在系统开启深色模式后，打开 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 站的深色模式能够 完全且稳定地 跟随你的系统设置。

推荐订阅源

Anyeの小站

前言

核心功能一览

如何使用

脚本解析