用于主题的 CSS 变量
使用基于令牌的主题系统，并通过 CSS 自定义属性在浅色值和深色值之间切换。
用于主题的 CSS 变量 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
主题架构概览
CSS 自定义属性是现代 CSS 主题系统的基础。它们充当可实时替换的令牌层，从而支持 dark 模式、白标化和由用户控制的个性化设置。
设计令牌层
结构良好的主题系统包含三层：
- 原始令牌：原始值（
--blue-500: #3b82f6） - 语义令牌：基于含义的令牌（
--color-primary: var(--blue-500)） - 组件令牌：特定于组件的令牌（
--button-bg: var(--color-primary)）
定义浅色主题
在 :root 上定义完整的浅色主题：
<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>
dark 主题覆盖
在 dark 作用域中覆盖令牌（可以使用媒体查询或类）：
<div class="demo">Adapts to dark mode automatically</div>
在组件中使用令牌
组件应使用语义令牌，而不是硬编码值：
<div class="card">Card using theme tokens</div>
基于类的覆盖
允许通过在 <html> 上添加类来手动覆盖：
<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>
组件级主题设置
组件可以定义自己的令牌层，以实现更深入的定制：
<div class="card">Component-level theming</div>
白标主题设置
CSS 变量支持白标产品：只需覆盖少量品牌令牌，就能让每个客户使用不同的主题：
<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>
主题变更过渡
可以通过为与颜色相关的属性设置 CSS 过渡来实现平滑的主题过渡：
<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>
令牌文档
请记录您的设计令牌，以便所有开发人员都知道应使用哪些变量。对于大型团队而言，一个显示所有令牌及其浅色和 dark 值的样式指南组件（例如故事书）非常有价值。
令牌工具：样式字典
样式字典（由亚马逊开发）会自动将 JSON 中定义的设计令牌转换为 CSS 自定义属性、JavaScript 常量及其他平台格式，从而让设计和代码中的令牌保持同步。
快速检查
在两级令牌架构中，.button 组件应引用哪种令牌类型作为其背景颜色？
回顾
CSS 变量为稳健的主题系统提供动力。请构建三层：原始令牌、语义令牌和组件令牌。通过媒体查询或属性选择器，在 :root 上以令牌覆盖的方式定义主题。在组件中使用语义令牌，以自动继承主题。样式字典等工具可以自动完成跨平台的令牌分发。
常见问题解答
「用于主题的 CSS 变量」课时是免费的吗？
是的 — 「用于主题的 CSS 变量」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「用于主题的 CSS 变量」这节课中我会学到什么？
使用基于令牌的主题系统，并通过 CSS 自定义属性在浅色值和深色值之间切换。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「用于主题的 CSS 变量」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。