实现暗/亮模式及跟随系统偏好，如何避免大量CSS重复？

最优实现方案 #

1. 单属性控制三态逻辑 #

你只需要给根节点（<html>标签）设置一个data-theme自定义属性，三个取值对应三种模式：

• light：强制亮色模式
• dark：强制暗色模式
• 不设置/设为auto：跟随系统偏好

2. 精简无重复的CSS写法 #

利用CSS选择器优先级特性，仅需定义一次亮色、暗色变量集合，完全避免重复代码：

/* 跟随系统模式的默认配置 */
:root {
  --text-color: #222;
  --bkg-color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #eee;
    --bkg-color: #121212;
  }
}

/* 强制亮色模式优先级高于系统默认 */
:root[data-theme="light"] {
  --text-color: #222;
  --bkg-color: #fff;
}

/* 强制暗色模式优先级高于系统默认 */
:root[data-theme="dark"] {
  --text-color: #eee;
  --bkg-color: #121212;
}

这种写法相比你原来的实现，变量定义重复量直接减少50%，后续新增自定义属性只需要在对应三个块里各加一次即可，维护成本极低。

3. 额外优化建议 #

• 你已经在用PHP预处理器的话，可以把亮色、暗色的变量集合分别存为数组，渲染CSS时批量输出到对应选择器，不需要手动重复写变量
• 目前的代码结构已经没有冗余逻辑，配合服务端的gzip/brotli压缩，重复的属性名会被高效压缩，不会产生额外的传输浪费
• 前端切换逻辑更简单：用户选择对应模式后，直接给<html>标签设置data-theme属性值，存入localStorage，页面初始化时读取赋值即可，无需处理多类名的互斥逻辑

内容的提问来源于stack exchange，提问作者Codemonkey