直接修改 :root 中的 css 变量即可生效，但需严格使用组件库约定的变量名（如 element plus 用 --el-color-primary，ant design vue v5 编译后为 --ant-primary-color），通过 devtools 确认实际引用的变量，并将主题样式置于全局而非 scoped 中，配合预处理器配置与 localstorage 持久化及系统偏好监听，确保全链路统一。
直接改 :root 里的 CSS 变量就能生效，但必须确保变量被所有组件真正读取到——Element Plus、Ant Design Vue 等库依赖的变量名和作用域有明确约定，不是随便起个 --my-color 就能覆盖按钮颜色的。
确认目标库使用的 CSS 变量名
Element Plus 的主色变量是 --el-color-primary，不是 --primary-color；Ant Design Vue（v5）用的是 @primary-color（Less 变量），编译后才转成 --ant-primary-color 这类 CSS 变量。不查源码或 DevTools 直接硬写，大概率白改。
- 打开浏览器开发者工具 → Elements → 选一个按钮 → Styles 面板里搜
primary，看它实际读的是哪个变量 - Element Plus 官方文档的「Design Tokens」页列全了所有可覆盖变量，比如
--el-color-success、--el-border-radius-base - Ant Design Vue 没暴露标准 CSS 变量名，得靠
vite-plugin-theme-preprocessor或手动注入 Less 编译结果
动态写入变量要绕过 scoped 样式隔离
Vue 单文件组件加了 scoped，生成的选择器带 data-v-xxx 属性，而你通过 document.documentElement.style.setProperty() 改的 :root 变量，对 scoped 内部样式无效——因为 scoped 样式里用 var(--el-color-primary) 时，变量值确实变了，但组件内部可能还缓存着旧计算值，或者被更高优先级选择器覆盖。
- 把主题相关样式抽到全局
styles/theme.scss，不写在.vue文件的<style scoped></style>里 - 避免在 scoped 样式中直接使用
var(--el-color-primary)，改用 class 绑定，比如:class="{ 'theme-primary': isDark }"+ 全局 class 定义 - Element Plus 的组件样式本身不带 scoped，所以改
:root是有效的，但自定义组件必须主动响应变量变化
Vite 中注入变量需匹配预处理器类型
你用 SCSS 还是 Less，决定了变量注入方式。Element Plus 官方推荐 SCSS 覆盖，Ant Design Vue 强依赖 Less，混用会导致变量未被解析。
- SCSS 项目：在
vite.config.ts的css.preprocessorOptions.scss.additionalData里@import主题变量文件，确保所有组件样式都能访问到$primary-color和对应的:root导出 - Less 项目：必须开启
javascriptEnabled: true，否则modifyVars不生效；且modifyVars只在构建时生效，无法 runtime 动态切换 - 想 runtime 切换 Less 主题？只能用
vite-plugin-theme-preprocessor提前生成多套 CSS，再动态替换<link>标签，别指望直接改变量
持久化主题需监听系统偏好并 fallback
prefers-color-scheme 媒体查询只在首次加载时生效，用户中途切系统主题，页面不会自动响应。而且用户手动切主题后，再切回系统模式，得知道上次选的是深色还是浅色。
- 用
window.matchMedia('(prefers-color-scheme: dark)')监听变化，触发document.documentElement.setAttribute('data-theme', 'dark') - 把用户选择存 localStorage，初始化时优先读 localStorage，没值再查
matchMedia - Element Plus 不识别
data-theme="dark"，得配合 CSS 规则，比如[data-theme="dark"] :root { --el-color-bg: #1f1f1f; }
真正麻烦的不是改变量，而是确保所有地方——组件库、自定义样式、第三方图标、甚至内联 style 属性——都统一走同一套变量体系。漏掉一两个，主题就看起来“哪儿不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
