给想要最稳的做法的人：蘑菇视频官网的夜间模式我这样做

蘑菇视频1022026-03-17 12:24:01

夜间模式不仅是视觉潮流，更是对用户体验、留存和跨设备一致性的温柔提升。下面把我在蘑菇视频官网上落地夜间模式的思路与实战细节写清楚了——包含可直接复制的示例代码、兼顾无障碍与性能的注意点，以及在 Google 网站（Google Sites）上发布展示的实用办法。想要最稳的落地效果，可以照着这个流程走。

一、总体思路（稳定优先）

用 CSS 变量统一配色，便于全站维护和切换。
优先响应用户系统偏好（prefers-color-scheme），再提供页面级切换（手动开关）。
把状态持久化（localStorage），避免每次进入都闪烁。
把视觉变换做成“类切换 + 过渡”，尽量不触发重排（布局不变，主要变色）。
保留图片/视频内容的原貌，避免简单反转导致画面异常。
确保色差满足无障碍对比（正文文本对比度建议不低于 4.5:1）。

二、核心实现（可复用范本）思路：定义一套 light/dark 的 CSS 变量，默认按照 prefers-color-scheme 加载；提供一个切换按钮，切换时向 html 根节点加/删一个 .night 类，并写入 localStorage。

示例 CSS（核心片段）：

:root{
  --bg: #ffffff;
  --surface: #f7f7f8;
  --text: #111111;
  --muted: #6b6b6b;
  --accent: #ff6b6b;
  --link: #1a73e8;
  --card-shadow: 0 1px 3px rgba(16,24,40,0.06);
  transition: color .18s ease, background-color .18s ease;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0d10;
    --surface: #0f1114;
    --text: #e6e7e9;
    --muted: #9aa0a6;
    --accent: #ff7b7b;
    --link: #8ab4ff;
    --card-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }
}

/* 手动切换时用 .night 覆盖（优先级更高） */
html.night{
  --bg: #0b0d10;
  --surface: #0f1114;
  --text: #e6e7e9;
  --muted: #9aa0a6;
  --accent: #ff7b7b;
  --link: #8ab4ff;
  --card-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* 页面元素使用变量 */
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans SC', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
}

/* 按钮、卡片等表面 */
.header, .card{
  background: linear-gradient(var(--surface), var(--surface));
  box-shadow: var(--card-shadow);
}
a{ color: var(--link); }
.muted{ color: var(--muted); }

示例 JavaScript（切换与持久化）：

(function(){
  const KEY = 'mogu_dark_mode';
  const root = document.documentElement;
  const saved = localStorage.getItem(KEY);

  // 初始：若有保存值按保存；无保存则由系统偏好控制（已由 CSS handles）
  if(saved === 'on') root.classList.add('night');
  if(saved === 'off') root.classList.remove('night');

  // 切换函数（绑定在切换按钮上）
  window.toggleNight = function(force){
    const isOn = typeof force === 'boolean' ? !force : root.classList.contains('night');
    if(isOn){
      // 当前是开，执行关
      root.classList.remove('night');
      localStorage.setItem(KEY, 'off');
    } else {
      root.classList.add('night');
      localStorage.setItem(KEY, 'on');
    }
  };
})();

示例切换按钮（HTML）：

<button id="night-toggle" aria-pressed="false" aria-label="切换夜间模式" onclick="toggleNight()">
  夜间模式
</button>

在按钮上也可以做图标及 aria-live 提示，提升可访问性。

三、图片、视频与嵌入内容的处理

logo 与图标：优先使用 SVG，并在 SVG 中支持 currentColor 或提供暗色版本；若不可，则为图标准备一套深色/浅色资源切换。
静态图片/海报：尽量不做全局 invert；如果确实要让控件（UI 图标）在深色模式下反色，可只对图标元素使用 filter: invert(1) hue-rotate(180deg)，并对真实照片做例外判断。
视频 player：确保控件皮肤使用 CSS 变量配色，视频内容本身不作处理；poster 图像可在夜间模式下替换为暗版 poster。
第三方嵌入（广告、社交组件）：很多第三方组件没夜间支持。把它们放在视觉上隔离的容器里（如带边框或卡片背景），避免直接污染全站配色。必要时提供默认浅色背景。

四、无障碍与性能检查

文本对比：按钮、正文、提示文本满足对比度要求（正文 >=4.5:1，控件文本 >=3:1 可接受）。
焦点可见性：夜间模式下保留高对比的 focus 样式（outline 或 box-shadow）。
减少 reflow：限制过渡属性为 color/background-color/opacity，不使用对布局敏感的 height/width 过渡。
尽量把 CSS 写进站点主样式表，避免大量 JS 运行时渲染导致首屏闪烁（FIP/FOIT）。prefers-color-scheme 的 CSS 优先确保首次渲染没错位。
测试指标：用 Lighthouse 检查可访问性与CLS，确认夜间切换不会影响性能分数。

五、在 Google 网站（Google Sites）上发布与展示的实践建议 Google Sites 对全站注入脚本/样式支持有限，下面是几种可行方案，按稳定性与可控性排序： 1) 最稳的：在你自己的主站（蘑菇视频官网）做完整实现，然后在 Google Sites 上写文章，展示实现思路、代码片段和外部链接（如 demo 链接或 GitHub 仓库）。Google Sites 适合做说明文档与示例，实际功能放在主站或演示页上。 2) 嵌入演示页（推荐）：把示例 demo（带完整 CSS/JS）部署到 GitHub Pages 或任一可托管静态页，然后在 Google Sites 用“插入 -> 嵌入 -> 嵌入 URL”把演示页放进文章中。用户可以在页面内直接交互，体验切换效果。 3) 代码片段展示：在 Google Sites 页面中直接贴示例代码（以可复制文本形式），并配上说明。避免把脚本直接写在 Google Sites，因为脚本标签常被阻止。 4) 主题配色：如果只是想让 Google Sites 页面本身变暗，可在 Sites 的 Theme 设置里选择暗色主题，但这只能影响 Google Sites 的页面，不会影响外部主站或嵌入内容。

六、测试清单（发布前逐项过）

桌面 & 移动上的默认深浅主题表现一致。
切换后 localStorage 生效，刷新仍保持选择。
logo、icon、poster 在深色下不显突兀。
键盘导航与屏幕阅读器测试通过（按钮 aria-pressed、aria-label）。
Lighthouse 的可访问性与性能分值没有明显回退。
在低端设备上切换不会卡顿（尽量降低 JS 权重）。

七、我推荐的发布顺序（最稳的路线）

在本地或测试环境里按上面做一个完整实现（CSS 变量 + prefers + 按钮 + localStorage）。
准备替换资源（深色 logo、深色 poster、SVG icons）。
做回归和无障碍测试，确保无闪烁与对比合格。
上线主站，监测用户行为（切换率、session length）并收集异常反馈。
在 Google Sites 上发布一篇技术解读（可以直接用本文），并嵌入演示页或代码仓库链接，给用户与同事可交互的预览。

结语这是一个以稳定和可维护为优先级的夜间模式实现方案：用 CSS 变量与 prefers-color-scheme 打基础，用小而清晰的 JS 做手动切换与持久化，谨慎处理图片与第三方嵌入，最后在 Google Sites 用嵌入或示例页展示实现效果。照着上面的代码和步骤走，蘑菇视频官网的夜间模式能稳而不惊，体验也会更成熟。

如果你需要，我可以把上面的示例做成一个可直接部署到 GitHub Pages 的 demo 项目，或者根据蘑菇视频官网当前的前端结构（静态 HTML / React / Vue / Next.js 等）给出更具体的整合方案。