@media (prefers-color-scheme) 可原生检测系统暗色/亮色偏好，仅响应操作系统设置，需写为 @media (prefers-color-scheme: dark) 等完整语法，推荐默认亮色、媒体查询覆盖暗色以避免回退异常。
如何用 @media (prefers-color-scheme) 检测系统主题
浏览器原生支持，无需 JS，直接在 CSS 里写媒体查询就能响应系统暗色/亮色设置。关键点是它只读取操作系统级偏好（macOS 系统设置、Windows 设置 → 个性化 → 颜色、iOS 设置 → 显示与亮度），不读取浏览器自身主题或插件开关。
- 必须用
@media (prefers-color-scheme: dark)或@media (prefers-color-scheme: light)，不能写成prefers-dark-mode或漏掉括号 - 未匹配时会回退到常规样式，所以推荐「默认写亮色样式，再用
@media覆盖暗色」，避免漏写导致白屏或反色异常 - 部分旧版 Safari（@supports (prefers-color-scheme: dark) 做安全包裹，但注意
@supports本身在 Safari 12.0 也未支持
prefers-color-scheme 在 CSS 变量中的典型用法
最实用的模式是定义两套 CSS 自定义属性，在 :root 下按主题切换，组件直接引用变量，避免重复写选择器。
:root {
--bg: #fff;
--text: #333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
--text: #e6e6e6;
}
}
body {
background-color: var(--bg);
color: var(--text);
}
- 变量名别用
--dark-bg这类带主题标识的，统一叫--bg更利于维护和后续扩展（比如加高对比度模式） - 不要在
@media外直接给:root写暗色值，否则亮色用户也会加载暗色变量，造成闪烁或 SSR 不一致 - 若用 CSS-in-JS（如 Emotion、Styled Components），需通过
useEffect + window.matchMedia手动监听变化，CSS 变量方案在此场景下失效
如何让内联 SVG 或 <canvas> 适配暗色模式
CSS 媒体查询对内联 SVG 的 fill、stroke 无效，<canvas> 绘图更需 JS 主动判断，不能靠样式自动切换。
- SVG：把颜色写成
fill="var(--icon-color)"，并在<svg>标签上加style="color: var(--icon-color)"，再通过currentColor引用 —— 这样它就能随:root变量一起变 - Canvas：用
window.matchMedia('(prefers-color-scheme: dark)').matches判断，首次绘制和监听change事件重绘；注意该 API 同步返回结果，无需 await - 避免在 Canvas 中硬编码
#000或#fff，应提取为配置对象，和 CSS 变量保持语义一致（如theme.colors.text）
服务端渲染（SSR）时怎么避免闪屏
纯前端判断必然导致首次渲染用亮色、几毫秒后切暗色，出现明显闪烁。解决核心是让服务端知道客户端偏好。
立即学习“前端免费学习笔记（深入）”；
- 无法从 HTTP 请求头直接读取
prefers-color-scheme（它不在标准 header 中），只能靠客户端 JS 上报或 Cookie 记忆 - 常见折中方案：首屏用
<script>同步执行matchMedia，立即加class="dark"到<html>，再配合 CSS 用html.dark { ... }覆盖 —— 这比等 CSSOM 构建完快得多 - 若用 Next.js / Nuxt，可在
getServerSideProps里读取req.headers.cookie中缓存的主题偏好（由前端 JS 写入），实现真正 SSR 暗色输出
::before 的 background，暗色模式下就可能突然冒出一块刺眼的白色。 
