直接利用 prefers-color-scheme 媒体查询可纯 CSS 实现系统级暗黑模式响应：@media (prefers-color-scheme: dark) 覆盖变量，配合 color-scheme 声明优化原生控件，兼容主流浏览器且无需 JS，但无法手动切换。
直接利用浏览器原生支持的 prefers-color-scheme 媒体查询，无需 JavaScript 就能实现响应式暗黑模式切换——系统设置变，网页自动跟着变。
基础写法：用 @media 检测用户偏好
在 CSS 中通过 @media (prefers-color-scheme: dark) 定义暗色样式，其余默认为亮色。浏览器会根据系统设置（macOS、Windows 10+/11、iOS/iPadOS、Android 10+）自动匹配：
- 未匹配时，使用常规样式（即亮色主题）
- 匹配成功时，覆盖对应属性（如背景、文字、边框等）
- 切换系统主题后，页面实时生效（无需刷新）
示例：
:root {
--bg: #fff;
--text: #333;
--border: #ddd;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
--text: #e6e6e6;
--border: #333;
}
}
body {
background-color: var(--bg);
color: var(--text);
border: 1px solid var(--border);
}
兼容性与降级策略
该特性已获主流浏览器广泛支持（Chrome 76+、Firefox 67+、Safari 12.1+、Edge 79+），但旧版或不支持环境需稳妥处理：
立即学习“前端免费学习笔记（深入）”；
- 所有样式必须有默认值（不能只写
dark分支） - 避免在
:root中仅用prefers-color-scheme覆盖全部变量——没匹配时变量会失效 - 可叠加
@supports (color-scheme: light)进一步校验（非必需，但更严谨）
增强体验：配合 color-scheme 声明
在 <meta> 或 <style> 中声明 color-scheme，帮助浏览器优化表单控件、滚动条、焦点环等原生元素的配色：
- 在
<head>中添加：<meta name="color-scheme" content="light dark"> - 或在
:root中写：color-scheme: light dark; - 这样复选框、输入框、按钮等会自动适配，不用额外重写
注意边界：它不是“手动切换开关”
prefers-color-scheme 只响应系统级设置，无法由用户在网页内点一下就切换。如果需要手动控制（比如顶部放个太阳/月亮图标），就必须引入 JS 和自定义 class（例如 data-theme="dark"），此时已不属于“纯 CSS”方案。
纯 CSS 方案的核心价值是零交互、零延迟、尊重用户习惯——适合追求简洁和无障碍的场景。
