React Academy · 课时

用于主题切换的 CSS 变量

Q: 「用于主题切换的 CSS 变量」这节课中我会学到什么？

使用 CSS 自定义属性定义完整的调色板，并通过切换数据属性来切换主题 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 CSS 自定义属性定义完整的调色板，并通过切换数据属性来切换主题

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

在 :root 上定义颜色令牌

在 :root 上定义的 CSS 自定义属性（变量）在整个样式表中都可用。您只需定义一次完整的颜色调色板——背景、文本颜色、表面和边框——然后在各处引用它们。这一唯一事实来源让主题切换变得非常简单。

使用 data-theme 覆盖深色主题

当 data-theme="dark" 属性设置在 document.documentElement 上时，类似 [data-theme='dark'] 的 CSS 选择器会使用深色值覆盖根元素变量。组件引用 var(--color-bg) 后，无需修改任何代码即可自动获取新值。

需要定义的关键变量

至少应定义：--color-bg（页面背景）、--color-text（主要文本）、--color-primary（品牌颜色）、--color-surface（卡片或面板背景）以及 --color-border（分隔线）。一致的令牌集合可以防止临时颜色值出现在组件中。

在组件样式中应用变量

在组件 CSS 中，引用类似 background: var(--color-bg) 和 color: var(--color-text) 的变量。您还可以提供回退值：var(--color-bg, #ffffff)。浏览器会在绘制时解析变量，因此同一个类可以同时适用于浅色和深色主题。

切换时的平滑过渡

将 transition: background-color 200ms, color 200ms 添加到 :root 选择器中。当 data-theme 属性发生变化时，所有使用 CSS 变量的元素都会同时过渡到新值。无需任何 JS 动画代码即可产生精致流畅的体验。

CSS 变量与 JS 控制的内联样式

使用 CSS 变量管理主题优于使用 JavaScript 设置内联样式。浏览器会原生处理所有样式重新计算，不会因为每个主题化的子组件而触发额外的 React 重新渲染，并且 CSS 层叠机制会自动处理继承。JS 只需切换根元素上的一个属性。

使用 prefers-color-scheme 的操作系统级回退

您可以将 CSS 变量与 @media (prefers-color-scheme: dark) 查询结合起来，作为仅使用 CSS 的回退方案。除了 data-theme 选择器之外（或替代它），还可以在媒体查询中定义深色覆盖样式。这样，即使 JavaScript 尚未运行，深色模式也能正常工作。

结合 data-theme 与媒体查询回退

最稳健的方式是将两种机制结合起来：@media 查询提供操作系统默认值，而 data-theme 属性允许通过 JavaScript 覆盖用户偏好。当该属性存在时，它会因选择器特异性更高而优先生效；当属性不存在时，媒体查询生效。

深色模式下的图像

对于在深色背景上显示效果不佳的图像，可以使用 HTML picture 元素，并添加一个 source media="(prefers-color-scheme: dark)" 子元素。浏览器会自动选择深色版本。对于 CSS 中的 SVG 图标，可以使用 filter: invert(1) 作为快速近似方案。

作用域限定的主题变量

您还可以将 CSS 变量限定在单个组件的作用域内：将它们定义在组件根元素上，而不是 :root 上。这样便可实现组件级主题，例如让侧边栏拥有不同于页面背景的独立背景令牌，同时仍能随着全局主题切换正确变化。

在 DevTools 中调试 CSS 变量

Chrome DevTools 会在“样式”面板中显示解析后的 CSS 变量值。点击变量引用即可跳转到其定义处。这样可以轻松确认任意元素是否应用了正确的深色或浅色令牌。您还可以直接在面板中实时编辑变量值。

用于主题化的 CSS 自定义属性

用于定义应用于整个文档的全局 CSS 自定义属性的 CSS 选择器是什么？

课程回顾：使用 CSS 变量切换主题

:root 上的 CSS 自定义属性为主题提供了集中的令牌系统。切换 HTML 元素上的 data-theme 属性即可即时切换主题。添加 CSS 过渡以实现平滑动画，使用 prefers-color-scheme 媒体查询作为仅使用 CSS 的回退方案，并避免使用逐组件的 JS 样式覆盖。

常见问题解答

「用于主题切换的 CSS 变量」课时是免费的吗？

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

「用于主题切换的 CSS 变量」这节课中我会学到什么？

使用 CSS 自定义属性定义完整的调色板，并通过切换数据属性来切换主题你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「用于主题切换的 CSS 变量」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy