你可能会说：
- “换个主色，为什么要改几十个文件？”
- “暗色模式下有些字突然看不清了，是哪里没改到？”
它是什么
设计变量通常写成 CSS 变量，比如 --prose: #3d3a36;，页面上用到正文颜色的地方都写 var(--prose)。改一处，全站跟着变；亮色和暗色两套主题，就是同一组名字的两套取值。
它的反面是把颜色值直接写死在各处：#3d3a36 出现在二十个地方，改主题时总有漏网的，暗色模式下就会冒出一块刺眼的深色字。
设计变量也是一种隐形依赖：引用了变量的地方，都依赖定义它的那个样式文件。删掉定义，引用它的地方不会报错，只会悄悄变成默认值（第 15 课）。
打个比方
像餐厅后厨的标准配方：盐放几克、火候几分钟都写在墙上，每个厨师照着做。改口味只改配方，不用挨个教厨师。
在这个网站里
这个网站的正文颜色是一个变量 --prose：亮色主题下是 #3d3a36，暗色主题下是 #cfc9c1，比普通的次要文字更深，长文读起来不累眼。所有颜色、字体都在 src/styles/global.css 里集中定义。
容易搞混的地方
常见误解
用了 CSS 变量，改主题就不会出错
正确理解
只有所有地方都引用变量才行。只要有一处直接写死了颜色值，换主题时它就会露馅。
你可以这样告诉 AI
复制下面这段，贴给你的 AI
这个项目的颜色、字号、间距有没有集中定义成变量？列出所有直接写死颜色值的地方，把它们改成引用已有的变量；需要新变量时先告诉我，不要自己新增一套。
接下来去哪
接着看
- 重构——在不改变外在表现的前提下，调整代码的结构：抽出公共部分、换个组织方式、删掉用不到的东西。
在这些课里出现
相关的真实事故