主题切换本质是动态更新CSS自定义属性，通过document.documentElement.style.setProperty修改:root变量值，配合data-theme属性与prefers-color-scheme实现用户选择＞系统偏好＞默认的三层优先级，避免样式闪烁与失效。
主题切换本质是 CSS 变量的动态重载，不是重写整套样式
直接替换 标签或切换 class 名看似简单，但容易导致样式闪烁、伪类失效、媒体查询丢失。真正可控的方式是把主题当作一组 :root 变量的集合，在运行时只更新这些变量值，其余样式保持不变。
- 所有颜色、间距、圆角等可变属性必须通过
var(--color-bg)引用，不能写死值 - 主题切换只需执行
document.documentElement.style.setProperty('--color-bg', '#2d3748') - 避免在 JS 中拼接完整 CSS 字符串注入
—— 会破坏 CSP 策略且无法被 DevTools 追踪
用 CSS 自定义属性 + prefers-color-scheme 实现自动回退
用户没手动选主题时，应尊重系统偏好。但 prefers-color-scheme 仅支持 light/dark，而业务可能有 blue、high-contrast 等多主题。解决方案是分层控制：
:root {
--color-bg: #fff;
--color-text: #1a202c;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="blue"]) {
--color-bg: #1a202c;
--color-text: #e2e8f0;
}
}
-
data-theme属性由 JS 控制，表示用户主动选择的主题 -
@media规则只在data-theme未显式设置时生效，形成“用户选择 > 系统偏好 > 默认”优先级 - 注意：不要用
!important覆盖变量，它会让后续 JS 动态修改失效
主题 JSON 配置 + JS 批量注入变量更易维护
把每个主题写成一个对象，比分散在多个 :root 块里更利于团队协作和 CI 检查。
const themes = {
light: {
'--color-bg': '#ffffff',
'--color-border': '#e2e8f0',
'--radius-base': '4px'
},
dark: {
'--color-bg': '#1a202c',
'--color-border': '#4a5568',
'--radius-base': '6px'
}
};
- 切换时遍历对象调用
setProperty()，无需硬编码变量名 - 可配合
localStorage持久化当前主题：localStorage.setItem('ui-theme', 'dark') - 首次加载时先读取
localStorage，再检查prefers-color-scheme，避免白屏闪动
第三方工具如 css-vars-ponyfill 仅在 IE11 必须支持时才引入
现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+）原生支持 CSS 自定义属性，无需 polyfill。强行引入 css-vars-ponyfill 会导致：
立即学习“前端免费学习笔记（深入）”；
- 所有
var()被转译为静态值，失去运行时动态更新能力 - 无法响应
matchMedia变化，prefers-color-scheme切换后不生效 - 打包体积增加 ~12KB，且与 Shadow DOM 兼容性差
如果项目已放弃 IE，删掉相关依赖，用原生方案更轻、更稳、更可调试。
真正难的不是切换动作本身，而是主题变量是否覆盖了全部可变样式点，以及是否漏掉了伪类、SVG fill、box-shadow 等隐式依赖颜色的地方 —— 这些地方最容易在暗色模式下突然变黑或不可见。
