直接改:root变量可批量生效，但需确保所有颜色、间距等硬编码值已替换为var(--x)引用；优先抽取--color-primary、--color-text、--color-bg等高频语义变量，替换时应加边界匹配防误伤，并检查伪元素、SVG及第三方组件兼容性。
直接改 :root 里的变量就能批量生效，但前提是旧项目里所有颜色、间距、圆角等硬编码值都已被替换成 var(--x) 引用——否则改了变量也白改。
哪些颜色/尺寸该优先抽成变量？
别一上来就全局搜 # 替换。先聚焦高频、语义明确、跨组件复用的常量：
-
--color-primary（主品牌色）、--color-text（正文色）、--color-bg（背景白/灰） -
--border-color（边框色）、--color-disabled（禁用态灰） -
--spacing-md（中等间距）、--radius-sm（小圆角）、--font-size-base（基础字号） - 临时调试色（如
#ff0000）、某个 SVG 图标里写死的fill: #999，跳过不碰——后期反而难定位
正则替换怎么避免误伤和漏改？
直接搜 #333 → 替换为 var(--color-text) 是高危操作，会命中 #333333 或注释里的 /* #333 is temp */。安全做法是加边界和空格匹配：
- 搜
color:\s*#333\b→ 替换为color: var(--color-text) - 搜
background-color:\s*#fff\b→ 替换为background-color: var(--color-bg) - 搜
padding:\s*8px\b→ 替换为padding: var(--spacing-xs)（注意单位和数值边界） - 替换前必须
git commit或备份整个样式目录；替换后立刻跑视觉回归，重点看input:focus边框、按钮 hover、SVGfill是否同步更新
为什么改了变量但部分样式没变？
不是变量没生效，是引用链断了。常见断点：
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 4px这种硬编码写法，完全不读--radius，得手动改成border-radius: var(--radius-sm) - 伪元素
::before/::after里的background-color或color没动，仍为硬编码 - 内联 SVG 的
fill和stroke属性需单独加fill: var(--color-icon) - 第三方组件（如 Element Plus）默认不响应你的
--color-primary，得查它暴露的主题变量名，比如--el-color-primary - 变量定义在局部作用域（如 Vue 单文件组件的
<style scoped>里），:root必须在全局 CSS 入口文件顶部声明
JS 动态更新变量时容易踩什么坑？
变量本质是 CSS 属性，JS 操作要走标准路径：
- 设值必须用
document.documentElement.style.setProperty('--theme-mode', 'dark')，不能写element.style.--theme-mode = 'dark'（语法错误） - 读值必须用
getComputedStyle(document.documentElement).getPropertyValue('--theme-mode')，不能直接读style对象 - 不要用
cssText覆盖整个style字符串，会清掉其他内联样式 - 媒体查询里不能靠“监听变量变化”，
@media (prefers-color-scheme: dark)中的var(--color-bg)只取当前计算值，需重设变量值
最常被忽略的一点：变量名拼错（比如 --color-tex）或大小写不一致（--Color-Primary ≠ --color-primary），浏览器静默 fallback 到初始值，DevTools 的 Computed 面板里会直接显示原始 var(--x) 字符串，而不是解析后的颜色值。
