直接用@media (prefers-color-scheme: dark)可响应系统暗黑模式，但需确保其位于常规样式之后、避免!important压制、动态注入css须在dom ready后执行，且旧版safari仅支持no-preference。
直接用 @media (prefers-color-scheme: dark) 就能响应系统级暗黑模式，但必须注意：它只监听系统设置，不接管手动切换逻辑，也不能回退到“未指定”状态。
为什么 prefers-color-scheme 有时不生效
常见现象是改了系统设置，网页却没变——大概率是 CSS 优先级或加载时机问题。
- 确保媒体查询写在常规样式之后（否则会被覆盖）
- 避免用
!important锁死亮色样式，会压制暗色规则 - 如果 CSS 是动态注入（比如通过 JS 创建
<style></style>），需确认注入时机在 DOM ready 之后 - Safari 13.1+ 和 Chrome 80+ 支持完整，旧版 iOS Safari 不支持
dark值，只认no-preference
如何配合手动切换做混合主题控制
用户既想跟随系统，又想点按钮强制切主题——prefers-color-scheme 本身不提供写入能力，得靠 class + JS 协同。
- 初始时用 JS 检测
window.matchMedia('(prefers-color-scheme: dark)').matches，给加data-theme="auto"或具体值 - CSS 中用
[data-theme="dark"]覆盖媒体查询，优先级更高 - 按钮点击后改
data-theme，同时 localStorage 记录偏好，下次跳过系统检测 - 别直接删 media query 规则，保留它作为 fallback（比如用户清空 localStorage 后仍可回退到系统设置）
prefers-color-scheme 的三个合法值怎么用
它不是只有 dark 和 light，第三个值 no-preference 很少被触发，但语义明确：系统未声明偏好（如某些 Linux 桌面环境或旧版本 macOS）。
-
@media (prefers-color-scheme: dark)→ 适配深色系统 -
@media (prefers-color-scheme: light)→ 适配浅色系统（多数人忽略这个，但对强制浅色设备有用） -
@media (prefers-color-scheme: no-preference)→ 当系统未设主题时兜底，建议设为浅色，因可访问性默认更倾向 light - 不写媒体查询时的样式，等价于
no-preference+light的交集，但行为不可控，显式声明更稳
真正麻烦的是边界情况：比如用户开了深色系统，但浏览器强制渲染成浅色（某些企业策略），或者 macOS 的“自动切换”在日出日落时延迟生效——这时候仅靠 prefers-color-scheme 不够，必须搭配用户主动操作和持久化存储。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
