17370845950

直接利用 prefers-color-scheme 媒体查询可纯 CSS 实现系统级暗黑模式响应：@media (prefers-color-scheme: dark) 覆盖变量，配合 color-scheme 声明优化原生控件，兼容主流浏览器且无需 JS，但无法手动切换。

直接利用浏览器原生支持的 prefers-color-scheme 媒体查询，无需 JavaScript 就能实现响应式暗黑模式切换——系统设置变，网页自动跟着变。

基础写法：用 @media 检测用户偏好

在 CSS 中通过 @media (prefers-col

• 未匹配时，使用常规样式（即亮色主题）
• 匹配成功时，覆盖对应属性（如背景、文字、边框等）
• 切换系统主题后，页面实时生效（无需刷新）

示例：

: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 声明

在 或 中声明 color-scheme，帮助浏览器优化表单控件、滚动条、焦点环等原生元素的配色：

• 在 中添加：
• 或在 :root 中写：color-scheme: light dark;
• 这样复选框、输入框、按钮等会自动适配，不用额外重写

注意边界：它不是“手动切换开关”

prefers-color-scheme 只响应系统级设置，无法由用户在网页内点一下就切换。如果需要手动控制（比如顶部放个太阳/月亮图标），就必须引入 JS 和自定义 class（例如 data-theme="dark"），此时已不属于“纯 CSS”方案。

纯 CSS 方案的核心价值是零交互、零延迟、尊重用户习惯——适合追求简洁和无障碍的场景。