如何通过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 里那几行。

立即学习“前端免费学习笔记（深入）”；

如何安全批量替换已有样式中的颜色值

别手动一个一个改。