给想要不绕弯的方法的人：蘑菇影视官网的夜间模式我这样做
给想要不绕弯的方法的人：蘑菇影视官网的夜间模式我这样做
如果你想要一个既简单又可靠的夜间模式实现方案，这篇就是直接上手的版本。我把实现思路、关键代码和常见坑位都列出来，按步骤操作就能在网站上得到平滑的夜间/日间切换体验，能保存用户偏好并兼顾系统暗色偏好。
核心思路（简短）
- 用 CSS 变量统一管理颜色，便于全站样式切换。
- 支持系统暗色模式（prefers-color-scheme）作为默认。
- 提供一个切换按钮，把 .dark 类加到 document.documentElement（），并把偏好写入 localStorage。
- 处理图片/Logo、iframe/第三方嵌入和过渡动画，保证视觉一致且不卡顿。
- 在不能直接插 JS 的平台（例如新版 Google Sites）提供替代方案（iframe 或外部托管页面）。
准备工作（结构）
- 全站样式用 CSS 变量（--bg、--text、--card、--accent 等）。
- 所有需要随主题变化的组件都用这些变量。
- 对于 logo 推荐使用 SVG（可用 currentColor 或可单独适配）或提供两套资源。
一步步实现（可直接复制粘贴）
1) 基础 CSS 变量和两套主题 在主样式文件里放这些变量（light 为默认），dark 通过 .dark 类覆盖，另外用 media query 支持系统暗色作为默认。
/* 基本变量（浅色默认） */ :root{ --bg: #ffffff; --text: #111218; --muted: #6b7480; --card: #f5f7fa; --accent: #1e88e5; --transition-time: .22s; }
/* 深色主题（通过 .dark 或 JS 添加） */ .dark{ --bg: #071017; --text: #e6eef3; --muted: #9aa7b1; --card: #0d1317; --accent: #5fa8ff; }
/* 系统偏好（当用户未设置时，浏览器自动应用） */ @media (prefers-color-scheme: dark) { :root{ --bg: #071017; --text: #e6eef3; --muted: #9aa7b1; --card: #0d1317; --accent: #5fa8ff; } }
/* 使用变量 */ html,body{ background: var(--bg); color: var(--text); transition: background var(--transition-time) ease, color var(--transition-time) ease; } .card{ background: var(--card); color: var(--text); } a{ color: var(--accent); }
2) 切换按钮（HTML）和无障碍 放一个简单的按钮在页面可见处，带 aria 属性。
🌙
按钮样式随变量走，focus 有明显样式，便于键盘访问。
3) JavaScript：切换、持久化、系统偏好监听 下面脚本完成三件事：读取并应用已保存偏好；如果没有，尊重系统偏好；响应按钮点击并保存到 localStorage；监听系统偏好变化（仅在用户未手动设置时同步）。
4) 防止首次加载闪烁（FOUC） 为了避免页面首次加载时闪现错误主题，可以在 head 内尽早运行一段很短的脚本，在样式表加载前就把 class 加上：
把这段放在 内 CSS 之前可显著减少闪烁。
5) 图片、Logo、iframe 与第三方嵌入处理
- Logo 建议使用 SVG 并用 CSS 控制颜色（fill: currentColor），这样随主题自然切换。
- 如果必须用 PNG，有两种办法：提供两套资源（logo-light.png + logo-dark.png），或在深色主题对图片应用 filter：.dark img[data-invert="auto"]{ filter: invert(1) hue-rotate(180deg) saturate(.9); }
- 第三方 iframe（例如播放页）通常无法直接改变内部样式，给容器设置暗色背景并尽量把控周边 UI（时间线、按钮等）颜色，或把第三方页面做代理/外部托管然后嵌入。
6) 过渡与性能
- 全站颜色过渡用短时间（0.18–0.3s），避免影响渲染。
- 避免在切换时大量触发重排。颜色变量仅影响绘制层更好。
- 对图片或大图应用 CSS filter 时注意 GPU 负担，尽量只对少量资源使用。
7) 无法插入 JS 的平台（比如新版 Google Sites） 新版 Google Sites 不支持直接把任意 JS 注入页面。这种情况下的可行方案：
- 将完整带切换逻辑的页面放在你能托管静态 HTML 的地方（比如 GitHub Pages、Netlify），然后把该页面用 iframe 嵌入到 Google Site。iframe 内的脚本和样式可以完全控制。
- 如果只想提供视觉上的“夜间版”，可以准备两套页面主题版本，让访客通过链接切换（不如 JS 顺滑，但实现简单）。
- 也可把 CSS 变量和样式尽量写入 Sites 的主题自定义里，使得默认主题就更接近暗色，配合用户浏览器的暗色偏好即可。
测试要点（发布前快速检查）
- 在深/浅两种主题下检查文字与背景的对比度，确保正文和按钮、链接的对比度充足。
- 手机和桌面都测试，尤其是首屏渲染是否闪烁。
- 关键交互（播放页、登录弹窗、浮动按钮）在暗色下是否仍可识别。
- Logo、图标在暗色主题下是否需要替换或反色处理。
小结（一句话） 把颜色集中到 CSS 变量、用 .dark 切换、把偏好写 localStorage，再兼容 prefers-color-scheme，基本能覆盖绝大多数场景；在不能运行脚本的 Google Sites 上，iframe 或外部托管是最直接的替代方案。
