CSS Academy · 课时

自动与手动深色模式切换

Q: 「自动与手动深色模式切换」这节课中我会学到什么？

构建主题切换控件，默认遵循系统偏好，同时允许用户手动覆盖该设置。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

构建主题切换控件，默认遵循系统偏好，同时允许用户手动覆盖该设置。

第 4 / 4 课13 个步骤

自动与手动深色模式切换 是 CoddyKit 上的免费 CSS Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

目标

理想的 dark 模式实现应默认自动检测 OS 偏好，并提供一个切换按钮，让用户能够独立覆盖该偏好，同时在页面加载之间保留用户选择。

架构概览

需要处理三种 states：

system 偏好：将 prefers-color-scheme 与 CSS 变量结合使用
用户覆盖：dark：在 <html> 上设置类或数据属性
用户覆盖：浅色：设置另一个类，以阻止自动 dark 模式

CSS 令牌设置

定义能够为所有 states 正确层叠的 CSS 变量：

<div class="demo" data-theme="dark">Dark token demo</div>
<div class="demo" data-theme="light">Light token demo</div>

JavaScript 切换逻辑

读取已保存的偏好，应用该偏好，并在 toggle 时更新：

<div class="demo" id="theme-demo">Toggle my theme</div>
<div class="demo" data-theme="dark">Dark override example</div>
<button id="toggle-btn">Toggle Theme</button>
<script>
  function toggleTheme() {
    const current = document.getElementById('theme-demo').dataset.theme;
    const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    if (!current) {
      const next = system === 'dark' ? 'light' : 'dark';
      document.getElementById('theme-demo').dataset.theme = next;
    } else {
      delete document.getElementById('theme-demo').dataset.theme;
    }
  }
  document.getElementById('toggle-btn').addEventListener('click', toggleTheme);
</script>

三种状态切换

更完善的三种状态切换：浅色 | system | dark：

<div class="demo" id="theme-demo">Cycles: light → system → dark</div>
<div class="demo" data-theme="dark">Dark state example</div>
<p id="state-label">system</p>
<button id="cycle-btn">Cycle Theme</button>
<script>
  const states = ['light', 'system', 'dark'];
  let current = 'system';
  const demo = document.getElementById('theme-demo');
  const label = document.getElementById('state-label');
  document.getElementById('cycle-btn').addEventListener('click', () => {
    current = states[(states.indexOf(current) + 1) % states.length];
    label.textContent = current;
    if (current === 'system') { delete demo.dataset.theme; } else { demo.dataset.theme = current; }
  });
</script>

避免错误主题闪烁

在页面渲染前同步应用已保存的主题：

<pre class="code-sample">&lt;!-- In &lt;head&gt;, before any styles --&gt;
&lt;script&gt;
  const t = localStorage.getItem("theme");
  if (t) document.documentElement.dataset.theme = t;
&lt;/script&gt;</pre>

切换按钮的无障碍性

切换按钮应向屏幕阅读器传达 current 状态。切换后请更新无障碍 label：

<button id="theme-toggle" aria-label="Switch to dark mode">🌙</button>

主题过渡动画

主题变更时实现平滑的颜色过渡：

<div class="demo" id="at-demo">Smooth theme transition</div>
<button onclick="document.documentElement.classList.add('theme-transitioning'); const d=document.getElementById('at-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff'; setTimeout(()=>document.documentElement.classList.remove('theme-transitioning'),250);">Toggle</button>

监听 system 变更

如果用户在页面打开期间更改了 OS 偏好，也应对此作出响应：

<p id="status">Listening for system theme changes…</p>
<script>
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    document.getElementById('status').textContent = 'System changed to ' + (e.matches ? 'dark' : 'light');
  });
</script>

dark 模式图标

为每种模式切换图标。对于能够适应主题的图像，请使用图片元素；也可以使用 CSS 显示或隐藏不同的图标：

<div>Light: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>
<div data-theme="dark">Dark: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>

总结：实现检查清单

dark 模式检查清单：

为所有颜色令牌使用 CSS 变量
使用 prefers-color-scheme 媒体查询进行自动检测
使用主题数据属性进行手动覆盖
使用 localStorage 持久保存设置
在 head 中使用内联脚本，避免闪烁
使用带动态无障碍标签的无障碍切换按钮

快速检查

页面加载时，哪种技术可以避免“错误主题闪烁”？

在交互式课程中回答

回顾

完整的 dark 模式切换功能使用 CSS 变量保存主题令牌，使用 prefers-color-scheme 查询进行自动检测，使用 data-theme 属性进行手动覆盖，使用 localStorage 持久保存设置，并使用头部同步脚本避免闪烁。请提供浅色/system/dark 三种状态的无障碍切换，以实现最佳用户体验。

免费开始

用 AI 导师学习 CSS — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「自动与手动深色模式切换」课时是免费的吗？

是的 — 「自动与手动深色模式切换」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「自动与手动深色模式切换」这节课中我会学到什么？

构建主题切换控件，默认遵循系统偏好，同时允许用户手动覆盖该设置。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「自动与手动深色模式切换」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy