蘑菇视频点开首页时，我把夜间模式从“玄学”变成了“可复制”

蘑菇视频1562026-02-01 12:26:02

当你第一次在蘑菇视频首页切换夜间模式，可能会遇到三种体验：加载时一闪而过的白屏、切换后样式残留不全、或者下次打开又回到“白天模式”。这些看起来像“玄学”的问题，其实有明确的成因与可复制的解决办法。我把实现夜间模式的关键步骤整理成一套可直接复制、适配绝大多数站点（含嵌入式页面）的方案，附带透明的实现代码和部署建议，方便你把蘑菇视频首页的体验从“摸索”升级为“工程化”。

核心思路（一句话）

使用 CSS 变量与一个全局类（例如 .dark）控制配色；在 HTML head 里早于样式表运行一段小脚本来决定并立即应用主题（避免闪烁）；通过 localStorage 记住用户选择，并提供可访问的切换控件；为 Google Sites 等受限平台提供替代部署方案。

为何会“玄学”

浏览器先渲染默认样式，再加载脚本决定主题，导致白屏或闪烁（FOUC）。
切换后没有统一的样式体系（不同组件/第三方资源没适配）。
用户偏好未持久化，或本地存储被覆盖/未生效。

可复制实现（最小可用方案）下面是一个完整、可复制的实现，你可以直接放到静态页面里，或根据说明嵌入到你的站点中。

1) 基础 CSS（使用 CSS 变量）在你的主样式里，用变量定义色彩，然后通过 .dark 覆盖这些变量。

:root { --bg: #ffffff; --text: #111827; --muted: #6b7280; --accent: #1e90ff; }

.dark { --bg: #0b0f14; --text: #e6eef6; --muted: #9aa6b2; --accent: #3aa0ff; }

body { background: var(--bg); color: var(--text); transition: background-color 240ms ease, color 240ms ease; }

/* 示例组件 */ .header, .player, .card { background: color-mix(in srgb, var(--bg) 90%, transparent); border-color: rgba(0,0,0,0.06); color: var(--text); } a { color: var(--accent); }

2) 防止闪烁的“预先注入”脚本（放在 head 中最前面）将下面这段脚本放在 HTML 的 head 中并尽量靠前执行，以保证在 CSS 加载前就给 documentElement 加上 .dark（或不加），避免首次渲染的颜色闪烁。

3) 切换控件（可访问性）在页面适当位置放一个按钮，便于用户手动切换。维护 aria-pressed，以及把状态写回 localStorage。

夜间模式

实现细节与优化建议

避免样式闪烁：关键是那段在 head 中的脚本必须在任何样式表之前运行；如果站点构建工具能把变量样式内联在 head，可进一步减少闪烁。
关闭不必要的过度动画：首屏时把 transition 延迟或移除，以免首次切换出现奇怪过渡。可以在 HTML 上加属性 data-theme-initialized，CSS 根据它决定何时启用 transition。
图片与媒体：为主视觉/封面图准备两套（light/dark）或使用 SVG/滤镜动态调整。对于视频播放器皮肤，尽量使用可注入的 CSS 变量或覆盖样式。
第三方组件：许多组件不支持主题切换，必要时通过 shadow DOM 穿透或用 CSS 覆盖层来隔离样式。
可访问性：保证对比度（文字与背景对比 >= 4.5:1），切换控件键盘可聚焦并有清晰的文本/aria 描述。
测试：在无痕窗口、不同浏览器、不同系统首选色彩（macOS/Windows）下测试。Chrome DevTools 可切换 prefers-color-scheme。

在受限平台（比如新版 Google Sites）如何部署新版 Google Sites 对直接注入自定义脚本有限制。如果你不能把脚本放到 head，下面几种策略可用：

最干净的方式：把主题控制的页面部署到 GitHub Pages 或其他静态托管，然后在 Google Sites 中用“嵌入”功能以 iframe 形式嵌入。这种方法最灵活，能保证脚本在 head 里生效。
使用 Google Apps Script：把包含主题逻辑的页面作为 Apps Script Web App 部署，再通过 iframe 嵌入到 Sites。
仅展示实现教程：在 Google Sites 页面中展示上述代码并提示用户复制到可编辑的 HTML 页面中（适合用于教程型展示，而非直接改站点的体验）。
对受限样式做“可见程度最少”的优化：如果不能运行 head 脚本，可通过把 body 背景设为暗色，并在页面加载后用脚本切换到 light（反向思路）来降低白屏感，但这种方式依赖站点对初始样式的控制权。