CSS变量应在:root中定义主题色，如--bg-base；通过data-theme属性切换深浅主题，JS用setAttribute修改并存localStorage；避免直接style.setProperty，因其易被覆盖且无法联动媒体查询。
怎么用 CSS 变量定义主题色
CSS 变量（:root 里声明的 --color-primary 这类）是动态换肤的基础。它不是写死在每个选择器里，而是集中定义、统一替换。
关键点在于：变量必须声明在 :root（全局作用域），且命名要有语义（比如 --bg-base 比 --c1 更易维护）。
- 避免在组件级选择器中重复声明同名变量，否则会覆盖逻辑变混乱
- 深色/浅色主题建议用同一套变量名，只改值，不新增变量集
- 变量值可以是颜色、尺寸、阴影甚至
transition时间，但别塞函数或表达式
:root {
--bg-base: #ffffff;
--text-primary: #333333;
--border-color: #e0e0e0;
}
[data-theme="dark"] {
--bg-base: #1a1a1a;
--text-primary: #f0f0f0;
--border-color: #333333;
}
JavaScript 怎么切换 data-theme 属性
最轻量、最推荐的方式是操作 或 的 data-theme 属性，让 CSS 变量响应式生效。不要直接改 style 里的 CSS 变量值——那样无法触发 :root 下的条件覆盖。
- 用
document.documentElement.setAttribute('data-theme', 'dark')切换，比 class 更语义清晰 - 记得初始化：页面加载时读取 localStorage 或系统偏好，再设一次属性，否则首屏闪白/黑
- 监听系统主题变化用
window.matchMedia('(prefers-color-scheme: dark)')，但仅作 fallback，别依赖它替代手动切换
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// 初始化
const saved = localStorage.getItem('theme') || 'light';
setTheme(saved);
为什么直接改 style.setProperty 不可靠
有人试过用 document.documentElement.style.setProperty('--bg-base', '#111') 动态赋值，短期看起来有效，但很快会出问题：一旦 CSS 中有 [data-theme="dark"] { --bg-base: #1a1a1a; } 这类规则，JS 设置的值就会被覆盖，而且无法和媒体查询、属性选择器联动。
立即学习“Java免费学习笔记（深入）”；
-
style.setProperty写在元素内联样式上，优先级低于选择器匹配的 CSS 变量声明 - 无法批量控制衍生变量（比如
--bg-hover基于--bg-base计算），得手动同步所有相关变量 - 服务端渲染（SSR）或 hydrate 场景下，JS 还没执行时样式已渲染，容易出现闪烁或错乱
主题切换时要注意过渡和可访问性
颜色突变对部分用户会造成视觉不适，尤其是暗色→亮色的瞬间高对比切换。CSS 变量本身不支持 transition，但可以用间接方式实现柔和过渡。
- 给
background、color等实际属性加transition: background-color 0.3s, color 0.3s，而不是试图过渡变量本身 - 避免在
prefers-reduced-motion开启时执行动画，用@media (prefers-reduced-motion: reduce)关掉 transition - 确保两种主题下文本与背景的对比度都 ≥ 4.5:1（可用 axe 或 Lighthouse 检查）
真正麻烦的不是切换动作，而是主题变量之间的依赖关系——比如 --text-secondary 要随 --bg-base 反向调整亮度，这种逻辑放在 CSS 里难维护，往往得靠 JS 预计算后注入，但那就脱离了纯 CSS 变量的初衷。
