前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载导读本文围绕 Bilibili-Evolved 仓库中的「自定义顶栏 - 深色模式开关」插件custom-navbar-integrated-dark-mode展开讲解如何在脚本的自定义顶栏中快速切换 b 站官方深色/浅色主题。通过本文你将掌握该插件的功能定位、与夜间模式的本质区别、基于theme_styleCookie 的切换原理与页面刷新机制以及它作为自定义顶栏扩展项在源码层面的实现方式可直接对照仓库代码进行二次开发或自定义配置。插件定位顶栏上的深色模式一键开关「自定义顶栏 - 深色模式开关」是 Bilibili-Evolved 注册表中面向样式类的插件位于 registry/lib/plugins/style/custom-navbar-integrated-dark-mode/其官方描述为为自定义顶栏添加一个深色模式开关方便快速切换深色模式。请注意和夜间模式区分受限于 b 站深色模式实现这个开关无法实时切换会刷新页面从中可以提炼出三个关键信息作用位置它并非独立的全局开关而是作为「自定义顶栏customNavbar」的一个顶栏项item存在点击后出现在脚本替换后的主站顶栏上切换对象切换的是 b 站官方深色模式integrated dark mode而非脚本自带的夜间模式dark mode交互限制由于 b 站官方深色模式的实现方式开关无法做到实时切换点击后会刷新页面以生效。该插件依赖「自定义顶栏」组件customNavbar 组件说明——该组件用脚本提供的顶栏替换 b 站原版主站顶栏非主站页面不替换。只有在自定义顶栏启用的情况下插件注入的开关按钮才会出现在界面上。深色模式与夜间模式容易混淆的两个概念插件描述中特别强调「请注意和夜间模式区分」这是理解该插件的前提。在 Bilibili-Evolved 中两者是完全不同的机制维度深色模式本插件切换夜间模式darkMode 组件切换对象b 站官方主题浅色/深色脚本自定义的夜间样式实现入口通过theme_styleCookie 控制通过body.darkclass 大量 SCSS 覆盖样式状态存储Cookietheme_styledomain 为 bilibili.comlocalStoragepbp_theme_v4是否实时否需要刷新页面是即时生效源码位置dark-mode/integrateddark-mode/index.ts夜间模式是脚本自带的主题能力其入口实现registry/lib/components/style/dark-mode/index.ts通过向document.body添加darkclass、写入localStorage的pbp_theme_v4并同步设置meta[nametheme-color]与meta[namecolor-scheme]来切换整体界面风格样式覆盖分散在 dark-mode 目录下的多个 SCSS 文件中深色模式是 b 站官方基于 Cookie 的主题方案脚本通过一个「跟随官方主题」的简化夜间模式组件dark-mode/integrated/index.md将自身界面与 b 站官方主题同步。而本插件做的是另一件事直接操作官方主题 Cookie让用户在顶栏上手动切换 b 站官方主题。官方文档还指出若只是希望脚本界面跟随 b 站官方深色/浅色主题应使用「跟随系统」或「integrated」方案而不是本插件。实现原理写 Cookie 再刷新页面插件核心逻辑位于 registry/lib/plugins/style/custom-navbar-integrated-dark-mode/index.ts整个切换动作可以拆解为「读取当前模式 → 计算目标模式 → 写 Cookie → 刷新页面」四步const updateHostCookie (targetMode: string) { cookieStore.set({ name: theme_style, value: targetMode, path: /, expires: Date.now() 365 * 24 * 60 * 60 * 1000, domain: bilibili.com, }) }clickAction: async () { const currentMode (await cookieStore.get(theme_style))?.value ?? light const targetMode currentMode dark ? light : dark updateHostCookie(targetMode) location.reload() },技术要点拆解Cookie 名称为theme_style这是 b 站官方深色模式的状态载体值为dark表示深色light表示浅色。脚本通过cookieStore.get(theme_style)读取当前模式默认值兜底若 Cookie 不存在用户从未设置过?.value ?? light会将其视为浅色模式保证首次点击也能正确切换到深色写入参数path: /保证全站生效domain: bilibili.com将 Cookie 写入主域expires设置为一年后365 天保证主题偏好长期保留强制刷新写入完成后调用location.reload()刷新页面。这正是文档所提「无法实时切换」的根因——b 站官方主题只在页面加载阶段读取 Cookie 并应用对应样式脚本侧无法在不刷新的情况下让官方样式层即时响应。源码解析插件注册与顶栏图标组件插件入口通过 addData 注入顶栏项插件本身不直接渲染任何 DOM而是通过addData(customNavbar.items, ...)向自定义顶栏的条目列表追加一个新项integratedDarkMode。customNavbar.items是自定义顶栏组件的扩展数据槽位定义在 registry/lib/components/style/custom-navbar/custom-navbar-item.tsexport const CustomNavbarItems customNavbar.items export const CustomNavbarRenderedItems customNavbar.renderedItems该项遵循CustomNavbarItemInit接口custom-navbar-item.ts其中name、displayName用于标识与排序content指向图标组件clickAction是点击时执行的逻辑。最终CustomNavbarItem类会通过Object.assign(this, init)将初始化数据合并进实例并根据customNavbar.order配置决定显示顺序、依据customNavbar.hidden决定是否隐藏。图标组件状态感知与 Cookie 监听按钮本体是 Vue 单文件组件 NavbarIntegratedDarkMode.vue它承担两部分职责1展示当前主题状态const isOfficialDarkModeEnabled () { return getCookieValue(theme_style) dark } const dark ref(isOfficialDarkModeEnabled())通过getCookieValue(theme_style)判断当前是否为官方深色模式dark为true时显示太阳图标表示「关闭深色模式」为false时显示月亮图标表示「开启深色模式」并以title属性给出悬停提示文案「开启深色模式 / 关闭深色模式」两个图标均内联在模板中太阳与月亮 SVG path样式上以fill: currentColor跟随顶栏文字颜色。2实时响应 Cookie 变化const cookieChangeHandler (e: CookieChangedEvent) { if (e.changed.some(cookie cookie.name theme_style)) { dark.value isOfficialDarkModeEnabled() } } cookieStore.addEventListener(change, cookieChangeHandler) onBeforeUnmount(() { cookieStore.removeEventListener(change, cookieChangeHandler) })组件通过cookieStore的change事件监听theme_styleCookie 的变化一旦检测到该 Cookie 被修改就同步刷新图标状态组件卸载时通过onBeforeUnmount移除监听器避免内存泄漏。这一设计意味着即使开关点击后页面会刷新刷新前图标也能立即反馈新的目标状态。与「夜间模式开关」插件的对比同界面、不同开关仓库中还存在一个外观几乎一致、但切换对象完全不同的插件「自定义顶栏 - 夜间模式开关」custom-navbar-dark-mode见 index.ts。两者的对比有助于读者按需选择对比项深色模式开关本插件夜间模式开关插件名customNavbar.items.integratedDarkModecustomNavbar.items.darkMode顶栏项显示名深色模式开关夜间开关切换目标b 站官方主题 Cookie脚本夜间模式组件开关核心动作写theme_styleCookie 刷新getComponentSettings(darkMode).enabled取反状态来源Cookie组件设置项settings是否需要刷新需要不需要夜间模式开关的clickAction只是简单地翻转darkMode组件的enabled设置NavbarDarkMode.vue 通过addComponentListener(darkMode, ...)实时同步按钮状态因为它驱动的是脚本自己的样式层可以即时生效。而本插件驱动的是 b 站官方主题层必须刷新页面。使用与配置方式安装与启用在 Bilibili-Evolved 的「设置 → 在线注册表」或功能列表中启用「自定义顶栏」组件customNavbar 组件说明替换原版主站顶栏安装并启用「自定义顶栏 - 深色模式开关」插件可通过在线注册表检索integratedDarkMode刷新主站页面后顶栏上会出现月亮/太阳图标按钮。使用行为点击一次即切换官方主题浅色 ↔ 深色随后页面自动刷新以应用新主题按钮悬停时显示「开启深色模式 / 关闭深色模式」提示主题偏好以theme_styleCookie 形式保存在bilibili.com主域有效期一年跨页面、跨标签页均生效。与「跟随官方主题」组件的配合若你更希望自动跟随 b 站官方主题例如手动在 b 站网页端切换主题后脚本界面自动同步应使用 dark-mode/integrated 的简化夜间模式组件而不是本插件本插件面向的是在顶栏上手动快捷切换官方主题的场景两者互补而非替代。开发者视角如何扩展自定义顶栏项如果你希望在 Bilibili-Evolved 的自定义顶栏上添加自己的功能按钮本插件是极佳的参考范例其模式可以归纳为声明插件元数据导出PluginMetadataname采用customNavbar.items.itemName命名空间displayName为插件在注册表中的展示名注入顶栏项在setup({ addData })中调用addData(customNavbar.items, items items.push({ ... }))定义项属性按 CustomNavbarItemInit 提供name、displayName、content懒加载的 Vue 组件与clickAction点击逻辑支持loginRequired仅登录后显示、active当前页高亮、href跳转链接、popupContent弹窗内容等扩展能力状态组件content指向的 Vue 组件负责图标渲染与状态同步可通过组件设置监听器或cookieStore事件实现响应式更新。顶栏项的最终装配由「自定义顶栏」组件的入口 entry.ts 完成它挂载CustomNavbar.vue、根据customNavbar选项切换固定/填充/阴影/模糊等样式并动态将各插件注入的 item 渲染为顶栏元素。总结「自定义顶栏 - 深色模式开关」是 Bilibili-Evolved 插件体系中一个轻量但典型的范例它借助自定义顶栏的扩展槽位customNavbar.items注入按钮以theme_styleCookie 为桥梁操作 b 站官方主题状态并通过location.reload()完成最终生效。理解它既能让你正确区分「深色模式」与「夜间模式」两套主题体系也能为开发自定义顶栏扩展项提供一份可直接照搬的代码模板。关键结论回顾本插件切换的是b 站官方深色模式与脚本自身的夜间模式是两套独立机制核心实现是读取并覆写theme_styleCookiedomain 为bilibili.com有效期一年随后刷新页面受限于 b 站官方主题的加载方式开关无法实时切换这是官方实现决定的而非脚本缺陷若需脚本界面自动跟随官方主题请改用「跟随官方主题」组件若需手动切换脚本夜间模式请使用「夜间模式开关」插件。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐Bilibili-Evolved 自定义顶栏Custom Navbar完整指南替换 B 站顶栏、配置项详解与源码原理Bilibili Evolved 自定义顶栏Custom Navbar完整指南替换 B 站顶栏、配置项详解与源码原理 自定义顶栏是哔哩哔哩增强脚本 Bil前端音视频告别刺眼Bilibili-Evolved暗色模式一键切换插件全攻略告别刺眼Bilibili Evolved暗色模式一键切换插件全攻略 你是否也曾在深夜刷B站时被纯白界面刺痛双眼是否希望视频观看体验能随环境光线自动调节Bi前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Bilibili-Evolved 自定义顶栏深色模式开关插件：Cookie 切换机制与实现解析
前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载导读本文围绕 Bilibili-Evolved 仓库中的「自定义顶栏 - 深色模式开关」插件custom-navbar-integrated-dark-mode展开讲解如何在脚本的自定义顶栏中快速切换 b 站官方深色/浅色主题。通过本文你将掌握该插件的功能定位、与夜间模式的本质区别、基于theme_styleCookie 的切换原理与页面刷新机制以及它作为自定义顶栏扩展项在源码层面的实现方式可直接对照仓库代码进行二次开发或自定义配置。插件定位顶栏上的深色模式一键开关「自定义顶栏 - 深色模式开关」是 Bilibili-Evolved 注册表中面向样式类的插件位于 registry/lib/plugins/style/custom-navbar-integrated-dark-mode/其官方描述为为自定义顶栏添加一个深色模式开关方便快速切换深色模式。请注意和夜间模式区分受限于 b 站深色模式实现这个开关无法实时切换会刷新页面从中可以提炼出三个关键信息作用位置它并非独立的全局开关而是作为「自定义顶栏customNavbar」的一个顶栏项item存在点击后出现在脚本替换后的主站顶栏上切换对象切换的是 b 站官方深色模式integrated dark mode而非脚本自带的夜间模式dark mode交互限制由于 b 站官方深色模式的实现方式开关无法做到实时切换点击后会刷新页面以生效。该插件依赖「自定义顶栏」组件customNavbar 组件说明——该组件用脚本提供的顶栏替换 b 站原版主站顶栏非主站页面不替换。只有在自定义顶栏启用的情况下插件注入的开关按钮才会出现在界面上。深色模式与夜间模式容易混淆的两个概念插件描述中特别强调「请注意和夜间模式区分」这是理解该插件的前提。在 Bilibili-Evolved 中两者是完全不同的机制维度深色模式本插件切换夜间模式darkMode 组件切换对象b 站官方主题浅色/深色脚本自定义的夜间样式实现入口通过theme_styleCookie 控制通过body.darkclass 大量 SCSS 覆盖样式状态存储Cookietheme_styledomain 为 bilibili.comlocalStoragepbp_theme_v4是否实时否需要刷新页面是即时生效源码位置dark-mode/integrateddark-mode/index.ts夜间模式是脚本自带的主题能力其入口实现registry/lib/components/style/dark-mode/index.ts通过向document.body添加darkclass、写入localStorage的pbp_theme_v4并同步设置meta[nametheme-color]与meta[namecolor-scheme]来切换整体界面风格样式覆盖分散在 dark-mode 目录下的多个 SCSS 文件中深色模式是 b 站官方基于 Cookie 的主题方案脚本通过一个「跟随官方主题」的简化夜间模式组件dark-mode/integrated/index.md将自身界面与 b 站官方主题同步。而本插件做的是另一件事直接操作官方主题 Cookie让用户在顶栏上手动切换 b 站官方主题。官方文档还指出若只是希望脚本界面跟随 b 站官方深色/浅色主题应使用「跟随系统」或「integrated」方案而不是本插件。实现原理写 Cookie 再刷新页面插件核心逻辑位于 registry/lib/plugins/style/custom-navbar-integrated-dark-mode/index.ts整个切换动作可以拆解为「读取当前模式 → 计算目标模式 → 写 Cookie → 刷新页面」四步const updateHostCookie (targetMode: string) { cookieStore.set({ name: theme_style, value: targetMode, path: /, expires: Date.now() 365 * 24 * 60 * 60 * 1000, domain: bilibili.com, }) }clickAction: async () { const currentMode (await cookieStore.get(theme_style))?.value ?? light const targetMode currentMode dark ? light : dark updateHostCookie(targetMode) location.reload() },技术要点拆解Cookie 名称为theme_style这是 b 站官方深色模式的状态载体值为dark表示深色light表示浅色。脚本通过cookieStore.get(theme_style)读取当前模式默认值兜底若 Cookie 不存在用户从未设置过?.value ?? light会将其视为浅色模式保证首次点击也能正确切换到深色写入参数path: /保证全站生效domain: bilibili.com将 Cookie 写入主域expires设置为一年后365 天保证主题偏好长期保留强制刷新写入完成后调用location.reload()刷新页面。这正是文档所提「无法实时切换」的根因——b 站官方主题只在页面加载阶段读取 Cookie 并应用对应样式脚本侧无法在不刷新的情况下让官方样式层即时响应。源码解析插件注册与顶栏图标组件插件入口通过 addData 注入顶栏项插件本身不直接渲染任何 DOM而是通过addData(customNavbar.items, ...)向自定义顶栏的条目列表追加一个新项integratedDarkMode。customNavbar.items是自定义顶栏组件的扩展数据槽位定义在 registry/lib/components/style/custom-navbar/custom-navbar-item.tsexport const CustomNavbarItems customNavbar.items export const CustomNavbarRenderedItems customNavbar.renderedItems该项遵循CustomNavbarItemInit接口custom-navbar-item.ts其中name、displayName用于标识与排序content指向图标组件clickAction是点击时执行的逻辑。最终CustomNavbarItem类会通过Object.assign(this, init)将初始化数据合并进实例并根据customNavbar.order配置决定显示顺序、依据customNavbar.hidden决定是否隐藏。图标组件状态感知与 Cookie 监听按钮本体是 Vue 单文件组件 NavbarIntegratedDarkMode.vue它承担两部分职责1展示当前主题状态const isOfficialDarkModeEnabled () { return getCookieValue(theme_style) dark } const dark ref(isOfficialDarkModeEnabled())通过getCookieValue(theme_style)判断当前是否为官方深色模式dark为true时显示太阳图标表示「关闭深色模式」为false时显示月亮图标表示「开启深色模式」并以title属性给出悬停提示文案「开启深色模式 / 关闭深色模式」两个图标均内联在模板中太阳与月亮 SVG path样式上以fill: currentColor跟随顶栏文字颜色。2实时响应 Cookie 变化const cookieChangeHandler (e: CookieChangedEvent) { if (e.changed.some(cookie cookie.name theme_style)) { dark.value isOfficialDarkModeEnabled() } } cookieStore.addEventListener(change, cookieChangeHandler) onBeforeUnmount(() { cookieStore.removeEventListener(change, cookieChangeHandler) })组件通过cookieStore的change事件监听theme_styleCookie 的变化一旦检测到该 Cookie 被修改就同步刷新图标状态组件卸载时通过onBeforeUnmount移除监听器避免内存泄漏。这一设计意味着即使开关点击后页面会刷新刷新前图标也能立即反馈新的目标状态。与「夜间模式开关」插件的对比同界面、不同开关仓库中还存在一个外观几乎一致、但切换对象完全不同的插件「自定义顶栏 - 夜间模式开关」custom-navbar-dark-mode见 index.ts。两者的对比有助于读者按需选择对比项深色模式开关本插件夜间模式开关插件名customNavbar.items.integratedDarkModecustomNavbar.items.darkMode顶栏项显示名深色模式开关夜间开关切换目标b 站官方主题 Cookie脚本夜间模式组件开关核心动作写theme_styleCookie 刷新getComponentSettings(darkMode).enabled取反状态来源Cookie组件设置项settings是否需要刷新需要不需要夜间模式开关的clickAction只是简单地翻转darkMode组件的enabled设置NavbarDarkMode.vue 通过addComponentListener(darkMode, ...)实时同步按钮状态因为它驱动的是脚本自己的样式层可以即时生效。而本插件驱动的是 b 站官方主题层必须刷新页面。使用与配置方式安装与启用在 Bilibili-Evolved 的「设置 → 在线注册表」或功能列表中启用「自定义顶栏」组件customNavbar 组件说明替换原版主站顶栏安装并启用「自定义顶栏 - 深色模式开关」插件可通过在线注册表检索integratedDarkMode刷新主站页面后顶栏上会出现月亮/太阳图标按钮。使用行为点击一次即切换官方主题浅色 ↔ 深色随后页面自动刷新以应用新主题按钮悬停时显示「开启深色模式 / 关闭深色模式」提示主题偏好以theme_styleCookie 形式保存在bilibili.com主域有效期一年跨页面、跨标签页均生效。与「跟随官方主题」组件的配合若你更希望自动跟随 b 站官方主题例如手动在 b 站网页端切换主题后脚本界面自动同步应使用 dark-mode/integrated 的简化夜间模式组件而不是本插件本插件面向的是在顶栏上手动快捷切换官方主题的场景两者互补而非替代。开发者视角如何扩展自定义顶栏项如果你希望在 Bilibili-Evolved 的自定义顶栏上添加自己的功能按钮本插件是极佳的参考范例其模式可以归纳为声明插件元数据导出PluginMetadataname采用customNavbar.items.itemName命名空间displayName为插件在注册表中的展示名注入顶栏项在setup({ addData })中调用addData(customNavbar.items, items items.push({ ... }))定义项属性按 CustomNavbarItemInit 提供name、displayName、content懒加载的 Vue 组件与clickAction点击逻辑支持loginRequired仅登录后显示、active当前页高亮、href跳转链接、popupContent弹窗内容等扩展能力状态组件content指向的 Vue 组件负责图标渲染与状态同步可通过组件设置监听器或cookieStore事件实现响应式更新。顶栏项的最终装配由「自定义顶栏」组件的入口 entry.ts 完成它挂载CustomNavbar.vue、根据customNavbar选项切换固定/填充/阴影/模糊等样式并动态将各插件注入的 item 渲染为顶栏元素。总结「自定义顶栏 - 深色模式开关」是 Bilibili-Evolved 插件体系中一个轻量但典型的范例它借助自定义顶栏的扩展槽位customNavbar.items注入按钮以theme_styleCookie 为桥梁操作 b 站官方主题状态并通过location.reload()完成最终生效。理解它既能让你正确区分「深色模式」与「夜间模式」两套主题体系也能为开发自定义顶栏扩展项提供一份可直接照搬的代码模板。关键结论回顾本插件切换的是b 站官方深色模式与脚本自身的夜间模式是两套独立机制核心实现是读取并覆写theme_styleCookiedomain 为bilibili.com有效期一年随后刷新页面受限于 b 站官方主题的加载方式开关无法实时切换这是官方实现决定的而非脚本缺陷若需脚本界面自动跟随官方主题请改用「跟随官方主题」组件若需手动切换脚本夜间模式请使用「夜间模式开关」插件。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐Bilibili-Evolved 自定义顶栏Custom Navbar完整指南替换 B 站顶栏、配置项详解与源码原理Bilibili Evolved 自定义顶栏Custom Navbar完整指南替换 B 站顶栏、配置项详解与源码原理 自定义顶栏是哔哩哔哩增强脚本 Bil前端音视频告别刺眼Bilibili-Evolved暗色模式一键切换插件全攻略告别刺眼Bilibili Evolved暗色模式一键切换插件全攻略 你是否也曾在深夜刷B站时被纯白界面刺痛双眼是否希望视频观看体验能随环境光线自动调节Bi前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
