Prefers-Color-Scheme 与 Prefers-Reduced-Motion
遵循用户的系统偏好，为深色模式和减少动效提供适配。
Prefers-Color-Scheme 与 Prefers-Reduced-Motion 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
用户偏好媒体特性
CSS 可以查询屏幕尺寸之外的用户系统偏好。这样，网站无需用户交互就能自动启用 dark 模式，并实现考虑可访问性的动画效果。
prefers-color-scheme
检测用户是否将其 OS 设置为浅色或 dark 模式：
<p>This page follows your OS color-scheme preference.</p>
实现自动深色模式
最简洁的实现方式是使用 CSS 变量，根据偏好切换变量值：
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
部分用户会因动画感到恶心或不适。prefers-reduced-motion: reduce 媒体特性可以检测这种可访问性偏好。
<div class="box spun"></div>
尊重动画偏好
不要完全禁用动画，而是提供替代性的细微动画：
<div class="card">Card with motion-aware transition</div>
prefers-contrast
检测用户是否偏好更高的对比度（出于可访问性考虑）或更低的对比度，并相应调整颜色选择：
<p>Contrast-aware text</p>
prefers-reduced-transparency
一些视力障碍用户更喜欢较少的透明效果。请减少基于 backdrop-filter 和 opacity 的效果：
<div class="glass-card">Glass card</div>
使用 JavaScript 访问偏好设置
使用 window.matchMedia() 从 JavaScript 查询这些偏好：
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
系统偏好与手动覆盖
默认遵循系统偏好，同时允许用户通过 toggle 进行覆盖。将覆盖设置存储在 localStorage 中，并将一个 class 应用到 <html>：
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
检测用户是否启用了节省数据模式。提供较小的图像，或跳过非必要资源：
<div class="hero">Hero banner</div>
在 DevTools 中测试
在 Chrome DevTools 中，渲染标签页可以模拟 dark 模式、减少动画以及其他偏好媒体特性，而无需更改 OS 设置。
快速检查
如何实现既能自动启用 dark 模式，又支持用户手动切换的最佳方式是什么？
回顾
prefers-color-scheme 支持自动 dark 模式。为了保证可访问性，prefers-reduced-motion 应禁用或简化动画。使用 CSS 变量实现这两项功能，可以使代码清晰且易于维护。始终提供手动覆盖选项，让用户能够独立于 OS 控制自己的偏好。
用 AI 导师学习 CSS — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「Prefers-Color-Scheme 与 Prefers-Reduced-Motion」课时是免费的吗？
是的 — 「Prefers-Color-Scheme 与 Prefers-Reduced-Motion」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「Prefers-Color-Scheme 与 Prefers-Reduced-Motion」这节课中我会学到什么？
遵循用户的系统偏好，为深色模式和减少动效提供适配。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「Prefers-Color-Scheme 与 Prefers-Reduced-Motion」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 语法与常见断点
- 宽度、高度与方向查询
- Prefers-Color-Scheme 与 Prefers-Reduced-Motion
- 组合多个媒体查询