CSS 变量驱动的主题系统：白天黑夜模式别再一处处改

很多站点的白天和夜晚模式一开始只是“先改几个背景色”，结果页面越做越多之后，问题就一起冒出来了。首页能切，文章页没切；卡片背景变深了，文字颜色忘了跟着改；某个模块在白天模式很好看，一到夜晚就刺眼得不行。

这类问题往往不是因为暗黑模式本身难，而是因为一开始没有把颜色系统设计成“可替换的变量层”。样式散着写的时候，每加一个页面、每补一个组件，后面都要补更多历史债。

真正该统一的不是颜色值，而是语义层

如果你在样式里到处直接写 #fff、#111、#2a2a2a，那主题切换迟早会变成体力活。更稳的做法是先定义语义变量，比如：

1. 页面背景色
2. 内容容器背景色
3. 主文本颜色
4. 次文本颜色
5. 边框颜色
6. 强调色
7. 阴影颜色

也就是说，组件不关心自己最后到底是白色、灰色还是深蓝色，它只关心自己用的是 --surface-card 还是 --text-secondary。这样你切换主题的时候，实际上只是在替换一套变量值，而不是一条条去找颜色。

最容易漏掉的不是大背景，而是中间层

很多人第一反应会先改 body 背景和主标题颜色，但实际最容易出问题的是这些位置：

1. 卡片边框和分割线
2. 输入框默认背景
3. 弹层、抽屉、下拉菜单
4. 引用块、代码块、表格表头
5. hover 状态和激活状态
6. 阴影透明度

尤其是分割线和阴影。白天模式里一条浅灰线很正常，到了夜晚模式如果还保留近乎纯白，页面就会显得很碎、很刺眼。很多“怎么总感觉不协调”的问题，实际上都是这些中间层没统一。

主题系统最好从根节点切换

我更建议把主题开关落在根节点上，例如 html[data-theme="dark"] 或 body.theme-dark。这样变量覆盖关系会更清楚，也方便局部排查。

一个简单结构通常就够用了：

:root {
  --bg-page: #f5f7fb;
  --bg-card: #ffffff;
  --text-main: #1d2433;
  --text-muted: #667085;
  --line-soft: rgba(16, 24, 40, 0.08);
  --brand: #2f6bff;
}

html[data-theme="dark"] {
  --bg-page: #0c1424;
  --bg-card: #121c30;
  --text-main: #d8e3f3;
  --text-muted: #93a4bd;
  --line-soft: rgba(226, 232, 240, 0.08);
  --brand: #63b5ff;
}

然后页面组件统一消费这些变量：

body {
  background: var(--bg-page);
  color: var(--text-main);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
}

.meta {
  color: var(--text-muted);
}

这样你的主题切换才是“体系化替换”，而不是“补丁式替换”。

夜晚模式里最该避免的两个极端

第一个极端是背景太黑、文字太白。表面上对比度够高，实际阅读非常累，尤其是文章页和评论区，长时间看会刺眼。

第二个极端是所有深色全挤在一起。背景深、容器也深、边框又不明显，结果信息层级全糊成一团，看起来就像一整块。

更稳的处理方式通常是：

1. 背景用深蓝灰，不用纯黑
2. 正文文字用偏灰白，不用纯白
3. 通过容器层次和边框透明度拉开结构
4. 强调色在夜晚模式里略微提亮，但不要发荧光

夜晚模式真正好看的关键，不是“更黑”，而是“更稳、更柔和”。

切主题时别忘了组件状态

一个主题系统做完之后，最好专门过一遍这些交互状态：

1. hover
2. active
3. focus
4. disabled
5. selected
6. placeholder

很多项目平时只看静态页面，等到实际点开搜索框、导航菜单、弹层按钮时，才发现夜晚模式下焦点描边、placeholder、选中底色全是旧颜色。

如果组件状态不一起收进变量系统，后面每做一个功能就还会继续漏。

一个更适合中小网站的落地顺序

如果你的网站已经有不少历史样式，不一定要一次性全部推翻。我更建议按这个顺序整理：

1. 先提取全站通用颜色变量
2. 优先改首页、文章页、搜索页这类高频页面
3. 再统一弹层、菜单、表单、按钮状态
4. 最后回头清理还在写死颜色的旧代码

这样做的好处是，每一步都能马上看到效果，也更容易避免一次性改太大把页面搞乱。

结语

主题切换真正难的，从来不是做一个按钮，也不是写一套深色配色，而是能不能把样式从“写死的颜色”升级成“可替换的语义变量系统”。

只要这一步走通，白天和夜晚模式后面就不是两个页面，而是一套结构、两份变量值。对中小型站点来说，这才是长期最省事的做法。