应使用语义化CSS变量替代硬编码颜色值，即在:root中定义--color-primary等用途型变量，并通过正则批量替换原有颜色值，配合深色模式媒体查询统一管理主题切换。
为什么直接全局搜替换 color 值会翻车
硬改所有 #333、rgb(51, 51, 51) 或 var(--text) 的写法，容易漏掉嵌套选择器、伪类、媒体查询里的颜色，还可能误伤注释或 JS 字符串。更麻烦的是：改完发现按钮背景和文字颜色不协调，又得挨个调——本质是颜色没形成语义化分组。
用 :root 定义语义化 CSS 变量
把颜色按用途命名，不是按值命名。比如 --color-primary 表示“主操作色”，而不是 --color-blue-600（后者在换主题时还得重命名）。
在样式表最顶部加：
:root {
--color-primary: #007bff;
--color-text: #212529;
--color-bg: #ffffff;
--color-border: #dee2e6;
}
这样后续所有地方都用 color: var(--color-text)，改主题只需动 :root 里那几行。
立即学习“前端免费学习笔记（深入）”；
如何安全批量替换已有样式中的颜色值
别手动一个一个改。用编辑器的正则替换（开启「匹配大小写」和「全字匹配」）：
- 查
color:\s*#333→ 替换为color: var(--color-text) - 查
background-color:\s*#fff→ 替换为background-color: var(--color-bg) - 查
border-color:\s*#dee2e6→ 替换为border-color: var(--color-border)
注意：先备份文件；替换后跑一遍视觉回归，因为有些颜色可能是临时调试用的，不该进变量体系。
深色模式下怎么只改一次变量就生效
利用 @media (prefers-color-scheme: dark) 覆盖 :root 变量即可，不用重写整套样式：
@media (prefers-color-scheme: dark) {
:root {
--color-text: #f8f9fa;
--color-bg: #212529;
--color-border: #495057;
}
}
关键点：所有用到颜色的地方都必须是 var(--xxx)，否则媒体查询无效；另外，不要在 :root 外定义同名变量，否则作用域混乱。
变量名一旦定下来，就别轻易改——组件库、业务代码、设计系统三方都依赖它，改名成本远高于初期多想两秒命名逻辑。
