用 :root 定义全局 CSS 变量，配合 [data-theme=”dark”] :root 覆盖，并通过 JS 切换 document.documentElement.dataset.theme 与 localStorage 实现持久化主题切换，避免 class 冲突与优先级问题。
如何用 CSS 自定义属性（CSS 变量）实现主题切换
直接用 :root 定义变量 + JavaScript 切换 data-theme 类名，是最轻量、最易维护的主题方案。不需要重载 CSS 文件，也不依赖构建工具。
为什么必须用 data-theme 而不是 class 切换主题
因为 class 选择器优先级容易被覆盖，而 [data-theme="dark"] 这类属性选择器更可控；同时能避免与业务 class 名冲突，也方便后续扩展多主题（如 data-theme="high-contrast"）。
-
:root中定义的变量是全局作用域，但会被[data-theme="dark"] :root等更具体的选择器覆盖 - 不要写
.dark .button { --color-primary: #007bff; }—— 这会让变量作用域缩到子树，丧失全局一致性 - 务必在
:root和[data-theme="xxx"] :root中都定义**全部**主题变量，哪怕值相同，否则未定义变量会回退到继承值或initial
JavaScript 切换主题时的关键操作
核心就两步：存到 localStorage + 设置 document.documentElement.dataset.theme。漏掉任一环节都会导致刷新丢失或样式不生效。
function setTheme(theme) {
document.documentElement.dataset.theme = theme;
localStorage.setItem('ui-theme', theme);
}
// 初始化
const savedTheme = localStorage.getItem('ui-theme') || 'light';
setTheme(savedTheme);
- 不要用
document.body.setAttribute()——data-theme必须挂在上才能让[data-theme] :root生效 - 切换后无需手动触发重绘，CSS 变量更新是自动的
- 如果服务端渲染（SSR），需在 HTML 模板中预先写入
，否则首屏会闪动
暗色模式下容易忽略的边界颜色问题
只改 --color-bg 和 --color-text 不够。表单控件、阴影、边框、SVG 图标填充色，甚至 scrollbar-color 都得同步响应变量。
立即学习“前端免费学习笔记（深入）”；
:root {
--color-bg: #fff;
--color-text: #333;
--color-border: #e0e0e0;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--form-focus-ring: #007bff;
}
[data-theme="dark"] :root {
--color-bg: #1e1e1e;
--color-text: #e0e0e0;
--color-border: #3a3a3a;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--form-focus-ring: #00aaff;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
}
input, select, textarea {
border-color: var(--color-border);
background-color: var(--color-bg);
}
input:focus {
box-shadow: 0 0 0 3px var(--form-focus-ring);
}
真正麻烦的是第三方组件库（比如 Ant Design 或 Element Plus）——它们往往内联了颜色值。要么覆盖其 CSS 变量（查文档看是否支持），要么用 !important 强制接管，后者不推荐但有时别无选择。