prefers-color-scheme 媒体查询
使用 prefers-color-scheme 媒体查询检测用户系统偏好的深色或浅色模式。
prefers-color-scheme 媒体查询 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
为什么需要自动深色模式？
许多用户会在 OS 级别启用深色模式，以提升舒适度、延长电池续航（OLED 屏幕）或满足可访问性需求。prefers-color-scheme 媒体查询可以检测此偏好，让网站自动进行适配。
查询值
有两个值：
light——用户偏好浅色配色方案（或没有偏好）dark——用户偏好深色模式
<p>This page respects your OS dark mode setting.</p>
移动优先 dark 模式
如果您的大多数用户使用 OLED 移动设备，请考虑将 dark 设为基础样式：
<p>Dark by default; switches to light in light mode.</p>
CSS 变量方案
最简洁的实现方式是为每种方案定义一组令牌：
<div class="card">Themed card using CSS variables</div>
dark 模式中的图像
在 dark 模式下降低图像亮度，避免图像过于刺眼：
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />
在 JavaScript 中检测
在 JavaScript 中检查 dark 模式偏好，以实现动态行为：
<p id="theme-status">Checking...</p>
<script>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
});
</script>
在 DevTools 中测试
在 Chrome DevTools → 渲染选项卡 → 模拟 CSS prefers-color-scheme。您可以在浅色和 dark 之间切换，而无需更改 OS 设置。在 Firefox 中：DevTools → 检查器选项卡 → 眼睛图标菜单。
dark 模式的配色原则
有效的 dark 模式应做到：
- 背景使用深灰色，而不是纯黑色——这样可以减轻眼睛疲劳
- 减少立体阴影——对于层级更高的表面，使用更浅的背景色调
- 调整边框颜色，使其更浅以提高可见性
- 检查文本对比度——可能需要使用不同的对比度
反转颜色反模式
不要在 dark 模式下简单地使用 filter: invert(1) 反转所有颜色。这样会使图像和图标变成奇怪的颜色。请为每个元素使用合适颜色的真正 dark 模式令牌。
性能：避免闪烁
如果您使用 JavaScript 驱动的主题切换，请在页面渲染前，于 <head> 中的 <script> 标签内同步为 <html> 应用主题类，以避免无样式主题闪烁（FOUT）。
主题颜色元标签
更新浏览器界面的颜色（移动地址栏、任务切换器），使其与 dark 主题保持一致：
<pre class="code-sample"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a2e"></pre>
快速检查
当 OS 设置为 dark 模式时，应用 dark 模式样式应该使用哪个媒体查询值？
回顾
prefers-color-scheme: dark 可检测 OS 的 dark 模式偏好。使用 CSS 变量在媒体查询中替换令牌值，实现自动 dark 模式。在 dark 模式下降低图像亮度。在 DevTools 中测试。更新浏览器的主题颜色元标签，以获得完整的移动体验。
用 AI 导师学习 CSS — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「prefers-color-scheme 媒体查询」课时是免费的吗？
是的 — 「prefers-color-scheme 媒体查询」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「prefers-color-scheme 媒体查询」这节课中我会学到什么？
使用 prefers-color-scheme 媒体查询检测用户系统偏好的深色或浅色模式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「prefers-color-scheme 媒体查询」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- prefers-color-scheme 媒体查询
- 用于主题的 CSS 变量
- color-scheme 属性
- 自动与手动深色模式切换