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

原创于 2025-11-03 23:08:42 发布 · 537 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#注入 #脚本猫

本文首发于 Anyeの小站，点击阅读原文体验更佳！

前言

你是否厌倦了在系统开启深色模式后，打开 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'] });

})();