当前位置：首页 > news >正文

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

news 2025/11/4 18:15:37

本文首发于 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'] });})();