配色方案属性
最后更新：2026-09-13
color-scheme 配色方案属性
color-scheme 用于告诉浏览器该元素支持哪些配色方案（浅色/深色），让浏览器能够选择合适的默认颜色来渲染该元素的原生控件（如滚动条、表单元素）。它是实现深色模式适配的重要属性。
| 分类 | |
|---|---|
| 初始值 | normal |
| 继承 | 是 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
normal | light | dark | only | 关键字 | 支持的配色方案 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color-scheme | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： 在 <html> 或 <body> 上设置 color-scheme: dark 可以让浏览器自动调整滚动条、表单控件等原生元素为深色样式。
提示： only 表示元素只支持指定的配色方案，会阻止浏览器自动切换；light 和 dark 组合则表示两种都支持。
❓ 常见问题
Qcolor-scheme 和 prefers-color-scheme 有什么区别？
Aprefers-color-scheme 是媒体查询，检测用户系统的明暗偏好，决定加载哪套 CSS；color-scheme 告诉浏览器「页面/元素支持哪些配色方案」，让浏览器为原生控件（滚动条、表单）选择默认颜色。实际项目中两者常配合：媒体查询定制样式，color-scheme 让原生控件同步适配。
Q设置了 color-scheme 后元素会自动变暗吗？
A不会改变你自己写的颜色，只影响浏览器原生 UI 的默认渲染，比如滚动条、输入框、下拉菜单、占位符等。背景、文字等自定义颜色仍需手动设置。例如 html { color-scheme: dark; background: #111; color: #eee; } 才能完整呈现深色页面。
Qcolor-scheme 的 only 关键字怎么用？
Aonly 表示「仅支持列出的方案，不参与自动切换」。比如 color-scheme: only dark 强制元素始终以深色渲染原生控件，即使系统处于浅色；color-scheme: light dark 表示两种都支持，跟随系统切换。only 适合品牌定制、内容创作类页面。默认 normal 跟随用户代理与系统设置。
Qcolor-scheme 和 meta theme-color 有什么区别？
Atheme-color 是 HTML meta，控制浏览器 UI 外壳的颜色（移动端地址栏、窗口主题色）；color-scheme 是 CSS 属性，控制页面内原生控件的明暗渲染。两者面向不同层面：一个管浏览器外观，一个管页面内容。做深色模式时可以一起设置，达到内外一致。
🏷️ 相关属性
💡 相关案例
📚 相关教程
