CSS：把颜色写成可以维护的约定

建站演示文章：用于展示本站的内容与排版，可按需要替换为自己的笔记。

先用用途命名

当同一种蓝色出现在按钮、链接和提示框中，修改时逐个寻找容易漏掉。可以先定义少量变量：

:root {
  --color-text: #263632;
  --color-surface: #ffffff;
  --color-border: #dce4df;
  --color-link: #356c56;
}

.note-card {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

这些名字描述用途，便于以后调整具体色值。如果按钮与链接将来需要不同表现，再拆分变量即可。

深色模式重新检查组合

深色模式不只是将背景换黑。需要一起检查正文、次要文字、边框、链接和悬停状态。尤其不要用极淡的文字承担关键信息。

不只靠颜色传达状态

错误提示同时使用文字说明；当前选中项可以增加边框或图标。这样即使颜色差异不明显，信息仍然可辨认。

从小范围开始

先整理真正重复的几种颜色，不急着定义几十个暂时用不到的变量。组件出现新需求时再扩展，让命名跟随实际用途。

检查时选择一张内容较长的卡片、一个代码块和一个按钮，看它们在明暗两种背景下是否都容易阅读。