关键在于将设计token集中定义在:root，用var()复用并设fallback，再通过document.documentelement.style.setproperty()动态切换值，结合localstorage和prefers-color-scheme实现持久化与系统适配。
用 CSS 变量统一管理主题，关键在于把颜色、字体、间距等设计Token集中定义在 :root，再通过 var() 在样式中复用，最后用 JavaScript 动态切换值——整个过程不依赖框架，纯原生、轻量且响应迅速。
在 :root 中集中定义主题变量
所有全局可复用的值都写在 :root 里，这是主题系统的“数据源”。命名建议按语义分组，比如 --color-primary、--space-md、--font-size-lg，避免模糊缩写。
- 变量值必须带单位（如
16px、#222），不能写成16或'#222' - 同一类变量尽量对齐，方便后期维护和工具提取：
:root {<br> --color-bg: #ffffff;<br> --color-bg-alt: #f8f9fa;<br> --color-text: #333333;<br> --color-text-secondary: #6c757d;<br> --space-xs: 4px;<br> --space-sm: 8px;<br> --space-md: 16px;<br>} - 避免在变量里拼接单位或计算，要用
calc()处理：例如margin: calc(var(--space-md) * 2);，而不是margin: var(--space-md) * 2;
在 CSS 中用 var() 引用并设置默认值
所有组件样式直接使用 var(--xxx)，而不是硬编码。默认值不是可选项，而是容错必需项——万一变量未被 JS 设置或加载延迟，页面不至于失色或错位。
- 写法统一为
color: var(--color-text, #333);，第二个参数是兜底值，支持任意合法 CSS 值 - 默认值能用函数：比如
box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.1)); - 不要嵌套
var()：像var(--a, var(--b))是无效语法，需单层展开
用 JavaScript 动态切换主题
切换主题的本质，是修改 :root 上的变量值。唯一可靠的方式是调用 document.documentElement.style.setProperty()。
- ✅ 正确：
document.documentElement.style.setProperty('--color-bg', '#1a1a1a'); - ❌ 错误：
document.body.style.setProperty('--color-bg', '#1a1a1a')—— 这只会给加一条无效内联样式，不触发级联更新 - 切换前确保变量已在 CSS 中声明，否则修改静默失败（无报错）
- 配合
localStorage记住用户偏好：localStorage.setItem('theme', 'dark');<br>document.documentElement.setAttribute('data-theme', 'dark');
支持系统级暗色模式自动适配
利用 @media (prefers-color-scheme: dark) 提前注入暗色变量，让页面在系统切换时“零延迟”响应。
- 在 CSS 中写：
@media (prefers-color-scheme: dark) {<br> :root {<br> --color-bg: #121212;<br> --color-text: #e0e0e0;<br> }<br>} - JS 主题切换逻辑要与媒体查询协同：比如用户手动切深色时，主动设
data-theme="dark"，避免被系统规则覆盖 - 检查对比度是否达标（如 WCAG AA 要求文本与背景比 ≥ 4.5:1），必要时用 HSL 函数动态调整亮度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
