如何通过CSS变量高效批量更改网站所有颜色？

本文共计494个文字，预计阅读时间需要2分钟。

硬改所有+

用 :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 外定义同名变量，否则作用域混乱。

变量名一旦定下来，就别轻易改——组件库、业务代码、设计系统三方都依赖它，改名成本远高于初期多想两秒命名逻辑。