CSS color-scheme 怎样让原生表单控件适配深色模式

我在给设置面板补深色主题时，最先遇到的不是卡片颜色，而是原生输入框、下拉框和滚动条仍然保持浅色。后来发现，问题通常不在控件样式写少了，而在页面没有声明自己支持哪种颜色方案。最小修复是把 color-scheme: light dark 放到 :root，再用 prefers-color-scheme 处理自定义内容。

color-scheme 主要告诉浏览器哪些颜色方案对页面和原生 UI 是可接受的；它不会自动替你把所有自定义颜色改成深色。下面按迁移顺序整理声明、控件、回退和检查点。

:root { color-scheme: light dark; } 负责让浏览器原生控件参与主题选择，prefers-color-scheme 负责页面自己的颜色；两者要配合使用。

先把页面从“未声明”迁移到双方案

先在文档头部给出一个尽早可见的偏好，再在 CSS 中声明页面接受浅色和深色。这里的顺序不是强制要求，但把 meta 放在样式之前有助于浏览器在首次绘制时更早知道页面意图。

/* 让页面画布、滚动条和原生控件参与系统主题选择 */
:root {
  color-scheme: light dark;
}

/* 自定义内容仍要明确写出两套颜色 */
body {
  color: #1d2433;
  background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  /* 深色规则只覆盖页面自己控制的颜色 */
  body {
    color: #edf2f7;
    background: #151a22;
  }
}

迁移时不要把 color-scheme 当成全局换肤器。它声明的是可接受的方案，浏览器会据此调整画布、滚动条、表单控件等浏览器提供的 UI；卡片、图片叠加层和品牌色仍由自己的 CSS 决定。

让原生表单控件跟随系统颜色

声明完成后，input、select、textarea 等原生控件可以使用浏览器针对当前方案准备的默认颜色。表单外层也可以单独声明方案，适合把一个嵌入式设置面板限制在双方案内。

  
  显示名称 
  密度 舒适紧凑

/* 面板接受两种方案，控件默认色由当前方案决定 */
.settings-panel {
  color-scheme: light dark;
  color: CanvasText;
  background: Canvas;
  border: 1px solid ButtonBorder;
}

/* 自定义焦点样式仍要保证两套背景下都有对比度 */
.settings-panel :focus-visible {
  outline: 2px solid Highlight;
  outline-offset: 2px;
}

如果组件必须保持浅色，可以只在组件根节点写 color-scheme: only light，不要为了“看起来统一”把整个网站锁死为浅色。局部声明会影响该元素及其后代的浏览器提供 UI。

自定义颜色继续使用 prefers-color-scheme

原生控件跟随方案后，页面自己的颜色仍要补齐。传统写法是媒体查询；如果只是少量成对颜色，也可以用 light-dark() 简化声明。两种方式都以 color-scheme 的声明为前提。

/* 先声明方案，再让同一属性读取浅色/深色两组值 */
:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #151a22);
  --text: light-dark(#1d2433, #edf2f7);
  --muted: light-dark(#5d6878, #aeb9c8);
}

.settings-panel {
  /* 自定义变量处理面板内容，原生控件仍由 color-scheme 协调 */
  color: var(--text);
  background: var(--surface);
}

.settings-panel small {
  /* 辅助文字保留足够层次，不依赖浏览器默认控件色 */
  color: var(--muted);
}

如果项目需要兼容不支持 light-dark() 的环境，可以把变量改成默认浅色值，再用 @media (prefers-color-scheme: dark) 覆盖。不要把媒体查询删掉后假设浏览器会替换所有品牌色。

only light 只用于明确的回退边界

only 的语义是禁止用户代理替换该元素的颜色方案。最常见的合理场景是一个确实只有浅色资产、浅色背景和深色文字的旧组件；它不是“暂时还没写深色 CSS”时的快捷修复。

/* 只有该旧组件确认不能安全进入深色模式时才锁定浅色 */
.legacy-chart {
  color-scheme: only light;
  color: #202020;
  background: #ffffff;
}

/* 页面主体仍然允许系统在浅色和深色之间选择 */
:root {
  color-scheme: light dark;
}

不要写 only dark 去强制一套没有完整深色资产的页面。对于普通页面，让浏览器知道“light dark”通常比禁止覆盖更稳妥；只有在确认自动深色会破坏内容可读性时，才对明确的浅色区域使用 only light。

迁移后的回归清单

一句话记忆：color-scheme 管浏览器提供的颜色方案，prefers-color-scheme 管你的自定义样式，only light 只锁定确有边界的局部内容。

常见问题

问：写了 color-scheme，为什么卡片颜色没有自动变深？ 因为卡片是自定义内容，需要用媒体查询或 light-dark() 自己提供颜色。

问：meta name="color-scheme" 能代替 CSS 属性吗？ 不能。meta 主要提供文档级提示，CSS 属性可以对根节点或局部组件声明方案，两者适合一起使用。

问：可以把所有组件都写成 only light 吗？ 不建议。这样会阻止浏览器对这些区域进行方案调整，只有明确不支持深色的旧内容才适合局部锁定。