CSS color-scheme 颜色方案

CSS color-scheme属性：light dark模式切换、prefers-color-scheme媒体查询检测系统主题、与color-scheme配合实现自适应暗黑模式 · 难度：入门 · +10XP

CSS color-scheme —— 一行代码适配暗黑模式

你有没有注意过，打开某些网页时浏览器的滚动条、输入框会自动变成深色？这就是 color-scheme 属性在起作用。它告诉浏览器：这个网页支持亮色和暗色模式。

基本用法

/* 只需要一行！ */
:root {
  color-scheme: light dark;
}

加了这一行后，浏览器的表单控件、滚动条、系统按钮都会自动跟随系统的主题设置。

配合 @media 实现完整的暗黑模式

:root {
  color-scheme: light dark;
}
/* 亮色模式 */
@media (prefers-color-scheme: light) {
  body {
    background: #ffffff;
    color: #333333;
  }
  .card {
    background: #f5f5f5;
    border-color: #ddd;
  }
}
/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a2e;
    color: #e0e0e0;
  }
  .card {
    background: #2a2a3e;
    border-color: #444;
  }
}

color-scheme 的三个值

动手练习

1. 基础练习：给你之前做的网页加上 color-scheme: light dark，打开系统设置切换暗黑模式，观察浏览器控件（滚动条、按钮、输入框）的变化。
2. 进阶应用：用 CSS 自定义属性（--bg-color, --text-color 等）配合 @media prefers-color-scheme 做一套完整的亮/暗主题切换系统，确保所有组件颜色都随主题变化。
3. 项目实战：给你的个人主页加一个"亮色/暗色/跟随系统"三选一切换按钮，用 localStorage 记住用户的选择，刷新后不丢失。

接下来学什么？

下一课学习 prefers-reduced-motion——尊重用户的动画偏好，让网页对所有人都友好。