CSS light-dark 怎样为浅色深色主题切换颜色

如果页面已经有浅色和深色两套颜色，CSS light-dark() 可以把“当前配色下该用哪个值”直接写进属性。关键前提是先在作用域声明 color-scheme: light dark，否则函数没有明确的配色上下文。一个稳妥的做法是：语义变量负责保存两套颜色，light-dark() 负责取值，旧浏览器则继续使用前面的显式浅色声明。

最小可用组合是 :root { color-scheme: light dark; } 加上 color: light-dark(浅色值, 深色值)。不要只写函数而忘记声明配色，也不要把手动切换只做成一个不参与计算的 data-theme 属性。

先把主题开关放到正确的作用域

color-scheme 既影响 CSS 的配色判断，也会让浏览器调整滚动条、表单控件等由用户代理绘制的部分。页面级主题通常放在 :root，组件级主题则放在组件容器。先建立一组语义变量，后面换颜色时不会把“按钮蓝”和“链接蓝”混成同一个含义。

:root {
  /* 允许文档响应操作系统或浏览器的浅色、深色偏好 */
  color-scheme: light dark;

  /* 同一语义在两种配色下使用不同值 */
  --page-bg-light: #f7f8fa;
  --page-bg-dark: #14171c;
  --text-light: #18202a;
  --text-dark: #eef2f7;
  --accent-light: #075985;
  --accent-dark: #7dd3fc;
}

这里的 light 和 dark 不是变量名的魔法，真正决定分支的是当前计算出来的 color-scheme。如果只给某个卡片声明 color-scheme: dark，这个卡片内部会以深色为上下文；不要误以为它会自动替换整个页面的主题。

用 light-dark() 接住两套语义变量

接下来把两个变量作为函数的两个参数。第一个参数对应浅色或没有偏好的情况，第二个参数对应深色。这样正文、卡片和边框只需要引用语义属性，组件本身不再重复写两套选择器。

body {
  /* 先给页面背景和文字建立同一套主题取值 */
  color: light-dark(var(--text-light), var(--text-dark));
  background-color: light-dark(var(--page-bg-light), var(--page-bg-dark));
}

.card {
  /* 暗色主题使用更亮的强调色，避免蓝色文字沉入深背景 */
  border: 1px solid light-dark(#d7dee7, #394554);
  box-shadow: 0 8px 24px light-dark(rgb(15 23 42 / 10%), rgb(0 0 0 / 35%));
}

.link {
  /* 同一个语义色在两种背景上保持可读 */
  color: light-dark(var(--accent-light), var(--accent-dark));
}

这套写法的优点是 CSS 变量仍然是设计令牌，函数只负责当前模式的选择。如果某个值是渐变或图片，也可以沿用同一思路，但应单独检查浏览器对该值类型的支持，不要把“颜色函数可用”推断成所有图片值都可用。

兼容旧浏览器并处理手动切换

light-dark() 在较新的浏览器中可用，旧设备仍可能无法解析。把显式浅色值写在前面，再覆盖支持函数的声明，是成本最低的回退方式：

.card {
  /* 不认识 light-dark() 的浏览器会保留这个浅色回退 */
  color: #18202a;
  background-color: #f7f8fa;
}

@supports (color: light-dark(black, white)) {
  .card {
    /* 支持函数时，才启用两套主题取值 */
    color: light-dark(#18202a, #eef2f7);
    background-color: light-dark(#f7f8fa, #14171c);
  }
}

如果产品有“跟随系统 / 浅色 / 深色”三个选项，手动模式最终要改变的是 color-scheme 的计算值，而不只是切换一个类名。下面的示例把开关限制在根元素，组件仍能继承同一个上下文：

function applyTheme(theme) {
  // auto 保留两套能力，其余值明确指定当前配色
  const root = document.documentElement;
  root.style.colorScheme = theme === "auto" ? "light dark" : theme;
}

applyTheme("dark");

若只希望一个局部预览卡片使用深色，可以在该容器上设置 color-scheme: dark，但要检查它里面的输入框、滚动条和占位文字是否仍然清楚。不要用 only 强行覆盖用户偏好，除非你确实拥有完整的配色和控件设计。

发布前按四种状态反向确认

主题色问题经常不是语法错误，而是某个边界没有覆盖。可以按下面的顺序检查：

1. 浅色状态：正文、卡片、链接和边框是否有足够对比度。
2. 深色状态：阴影是否变成过重的黑块，强调色是否过亮刺眼。
3. 不支持 light-dark()：回退色是否仍能让主要内容可读，布局是否没有依赖函数结果。
4. 表单控件和局部容器：输入框、滚动条、占位文字是否跟随预期的 color-scheme。

如果只需要响应系统偏好，light-dark() 能减少重复的媒体查询；如果要把主题状态保存到用户设置，仍然可以由 JavaScript 修改根元素的 color-scheme。两者并不冲突，关键是让 CSS 的配色上下文和产品状态保持同一个来源。

常见疑问

为什么写了 light-dark() 却看起来不切换？

优先检查当前元素或祖先是否声明了 color-scheme: light dark，再确认浏览器是否支持该函数。没有上下文时，函数无法按预期在两套值之间选择。

还需要 prefers-color-scheme 吗？

需要时仍可使用。prefers-color-scheme 适合需要编排大量选择器或处理复杂结构的场景；light-dark() 更适合把一对颜色直接放进属性，减少重复规则。两种方案可以按组件复杂度混用。

总结：先用 color-scheme 定义配色上下文，再用 light-dark() 读取两套语义值，最后用显式回退和四状态检查兜住兼容边界。这样主题切换的责任清晰，页面也不必为每个颜色重复维护一套媒体查询。