我做了个对比蘑菇视频电脑版：夜间模式的“优先级规则”，搞懂就不乱了
前言 作为经常在电脑上看视频的人，夜间模式开关突然失灵、界面忽明忽暗、明明系统是暗色却页面是亮色，这些体验令人头疼。我对蘑菇视频电脑版做了系统对比测试，理顺了夜间模式在不同环境下的“优先级规则”，把结论写成这篇文章，方便你遇到混乱时快速排查和修复。
我怎么做的测试
- 在 Windows 10/11 与 macOS 上分别测试蘑菇视频网页版与电脑版（Electron/客户端）；
- 切换系统暗色/亮色、浏览器暗色强制、浏览器插件（Dark Reader 等）、节电模式、账户偏好与站点本地设置；
- 每一种组合都记录最终生效的主题状态与可能的冲突表现。
通用优先级（从高到低） 实际环境中会有例外，但下面这套顺序能覆盖绝大多数情况，按这个顺序排查最快：
1) 用户自定义扩展或用户样式（如自定义 CSS、Dark Reader 等）
- 这些运行在浏览器层面、直接改写页面样式，通常在渲染后覆盖网站/客户端提供的样式，因此优先级最高。
2) 应用内手动切换（蘑菇视频的“夜间模式”开关）
- 如果蘑菇视频提供本地开关（客户端或页面内开关），且没有被扩展覆盖，则该开关通常直接改变页面样式或切换 CSS 类，优先于系统默认主题。
3) 账户或站点级偏好（登录后保存的主题设置）
- 有的网站会把主题偏好存到服务器或 cookie/localStorage，中途登录会以账户设置为准，应用内开关与账户设置会有交互（例如登录后恢复账户偏好）。
4) 浏览器“强制暗色”/网站渲染策略（浏览器实验性功能）
- Chrome/Edge 等提供“强制暗色网页”功能，或开发者工具的强制渲染选项，这类功能会试图将未实现暗色的页面强行转换，优先级高于操作系统但低于用户扩展的直接覆盖。
5) 操作系统外观（Windows / macOS 的深色模式）
- 许多现代网站、Electron 应用会读取 prefers-color-scheme 媒体查询，按系统设置提供暗色或亮色主题。系统通常是基础层，除非被上层设定覆盖。
6) 节电/省电模式触发的界面调整
- 某些设备在省电模式下会限制动画或改用更省电的主题，但这类机制很少直接改变网站颜色，更多影响效果与亮度。
7) 默认主题（网站/应用出厂设定）
- 当没有任何上层偏好存在时，页面会回落到默认主题（比如亮色主题），这就是最终“兜底”的状态。
举例说明（三个常见场景）
-
场景 A：你安装了 Dark Reader，系统亮色，蘑菇视频开着默认（未关夜间） 结果：页面呈暗色 —— 因为扩展覆盖了网站样式。
-
场景 B：你未安装扩展，系统为暗色，但蘑菇视频登录账户并设为亮色模式 结果：页面呈亮色 —— 账户/站点偏好覆盖了系统设置。
-
场景 C：客户端有夜间模式开关，你在客户端打开夜间，但浏览器同时开启“强制暗色网页”并且存在兼容问题 结果：偶尔出现样式冲突或图像渲染异常 —— 浏览器强制转换与客户端样式有重叠，需禁用浏览器强制功能或客户端开关二选一。
排查与修复步骤（快速清单）
- 先在无痕/隐私窗口打开蘑菇视频，观察是否为暗色（无扩展影响）。
- 逐步禁用浏览器扩展（尤其是黑暗主题相关），再试一次。
- 检查蘑菇视频的页面/客户端内是否有夜间模式开关，切换并刷新页面。
- 登录账户，进入设置看是否有主题偏好，修改并登出重试。
- 检查浏览器设置里的“强制暗色”或实验性标志（chrome://flags），如开启可尝试关闭。
- 清除缓存与 LocalStorage，有时候旧设置残留会导致显示异常。
- 最后在另一台电脑或不同浏览器上验证，确认是否为本机环境问题。
小技巧与注意事项
- 如果你想让某台设备始终按系统暗色走：关闭所有暗色扩展，确保网站/应用的主题设为“跟随系统”或“自动”。
- 开发者或高级用户：按 F12 打开元素检查器，查看 body 或根节点的类名与 prefers-color-scheme 的响应，可快速定位是哪个层级在生效。
- 当图片或播放器控件在暗色下反而更刺眼，常常是浏览器或扩展仅反转颜色导致，考虑用应用原生暗色模式而非强制反转。
