主题换肤应通过 :root 定义 --primary、--text、--bg 等 5–8 个语义化变量，用 class 切换 html 元素主题类并配合 localStorage 记忆偏好，避免硬编码颜色、内联样式及忽略 SVG/第三方组件适配。
怎么用 :root 定义可切换的主题色变量
主题换肤本质是批量替换颜色值，:root 是最轻量、最可控的入口。它让所有组件都能通过 var(--primary) 读取当前主题色，而不是硬编码 #007bff 这类值。
关键不是“定义多少变量”，而是哪些必须抽出来：通常只需 --primary、--text、--bg、--border、--success 等 5–8 个基础语义变量。多了反而难维护。
- 别在每个组件里重复定义
--primary，统一放在:root或一个单独的theme.css中 - 避免用
rgba(--primary, 0.1)这种写法——CSS 变量不能直接参与计算，得写成rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.1)或改用color-mix()（兼容性差） - 深色模式下，
--bg建议用#121212而非纯黑#000，更护眼也更真实
如何用 class 切换主题而不刷新页面
给 加 class 是最稳妥的方式，比如 class="theme-dark"，再配合属性选择器重置变量值。比 localStorage + JS 注入 style 标签更稳定，也更容易被 DevTools 调试。
不要监听 prefers-color-scheme 后立刻覆盖用户手动选择——它的优先级应低于用户主动切换。
- 切换时只改
document.documentElement.className，不要操作document.body或其他容器 - 用
localStorage.setItem('theme', 'dark')记住用户偏好，下次加载时在上提前加好 class，避免闪屏 - 如果用了 CSS-in-JS（如 Emotion），注意它可能绕过
:root变量，得额外配置主题 Provider
为什么 color-scheme: light dark 不能替代手动换肤
color-scheme 只影响表单控件、滚动条、系统级高亮等极少数元素，浏览器不会用它重绘你的按钮、卡片或文字颜色。它只是告诉浏览器“我支持这个模式”，不是“请帮我换色”。
常见误解是设了 color-scheme: dark 就能自动变暗——实际什么都不会变，除非你手动写了 @media (prefers-color-scheme: dark) 规则并重置变量。
-
color-scheme是声明式提示，不是控制指令 - 它对自定义组件完全无效，
button的背景色仍由你写的background: var(--primary)决定 - 和
:root变量搭配时，建议在@media块里覆盖变量值，而不是靠 JS 切 class
哪些地方容易漏掉导致换肤失效
换肤失败往往不出现在主色调上，而卡在几个“边缘但高频”的地方：SVG 图标颜色、伪元素内容、内联 style、第三方组件样式、图片滤镜。
尤其是 SVG，很多人用 fill="#333" 写死，或者用 fill="currentColor" 却忘了 color 本身没随主题更新。
- SVG 图标统一用
fill="currentColor"，并在父容器上设color: var(--text) - 避免
style="color: #666"这类内联样式，JS 动态设置时改用element.style.color = 'var(--text)' - 第三方 UI 库（如 Ant Design）需查文档看是否支持 CSS 变量，否则得用
:where(.theme-dark) .ant-btn手动覆盖 - 阴影、渐变、滤镜里的颜色值也要用变量，比如
box-shadow: 0 2px 4px var(--shadow)
换肤不是改完 :root 就结束的事，真正麻烦的是那些没走 CSS 变量路径的“例外”。每次加新组件，都得问一句：它的颜色是从哪来的？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
