直接写@media (prefers-color-scheme: dark)即可生效，但需确保css作用于真实渲染元素、无内联样式覆盖、无更高优先级规则锁定，且兼容chrome 76+、firefox 67+、safari 12.1+。
prefers-color-scheme 媒体查询怎么写才生效
直接用 @media (prefers-color-scheme: dark) 就行，但很多人写了没反应——不是语法错，是漏了关键前提：CSS 必须作用在真实渲染的元素上，且不能被更具体的规则或内联样式覆盖。
常见错误现象：background-color 没变，但 color 变了；或者开发者工具里媒体查询已匹配，页面却无响应。
- 确保目标元素没有硬编码的
style="background-color: white"这类内联样式 - 检查是否被更高优先级的选择器（比如
.card .title）锁死了颜色，试试加!important临时验证（上线前必须去掉） -
prefers-color-scheme不支持 CSS-in-JS 的动态插入逻辑（如某些 styled-components 的 SSR 场景），需在初始 CSS 中声明 - 浏览器兼容性没问题：Chrome 76+、Firefox 67+、Safari 12.1+ 都支持，但旧版 Safari 对嵌套媒体查询支持弱，别套太深
如何让颜色适配环境光而不仅是系统主题
仅靠 prefers-color-scheme 只能区分亮/暗模式，没法响应实际环境光强弱。真要根据光照调整，得用 matchMedia + window.matchMedia 监听 prefers-reduced-data 或第三方传感器？不，目前唯一标准方案是 light-level 媒体查询——但它已被废弃，且从未被主流浏览器实现。
所以现实路径只有一条：放弃原生环境光检测，改用用户手动偏好 + 系统主题兜底。
立即学习“前端免费学习笔记（深入）”；
- 提供页面级开关（如一个
data-theme="auto|light|dark"属性），优先读取该值，再 fallback 到prefers-color-scheme - 避免在 CSS 里写死
hsl(200, 50%, 90%)这类绝对值，改用 CSS 自定义属性，例如--bg-base: #fff; --bg-base-dark: #1a1a1a;，方便 JS 动态切换 - 不要试图用
screen.orientation或DeviceMotionEvent间接推测光照——误差大、耗电、权限敏感，且和色彩无关
dark 模式下颜色对比度不够被 WCAG 报错怎么办
自动切 dark 模式不等于可访问。很多团队把 #333 换成 #333 的“深色版”#222，结果文字对背景对比度掉到 3.2:1，低于 WCAG AA 要求的 4.5:1。
核心不是换色，是重算亮度差值。别凭感觉调，用工具验证。
- 文本色与背景色的相对亮度差，可用
getContrastRatio()（来自@radix-ui/colors或手写函数）实时测，阈值设为 4.5 - 深色背景下慎用纯黑
#000：OLED 屏易烧屏，且文字边缘发虚；推荐用#121212或#1a1a1a作基底 - 按钮禁用态别简单降低透明度（如
opacity: 0.5），它会同时削弱文字和背景对比度；应单独设color: #666和background-color: #333 - 图标颜色别只依赖 fill，SVG 内联 style 或
currentColor更可控
CSS 自定义属性 + JS 切换主题时的渲染时机问题
用 JS 设置 document.documentElement.style.setProperty('--bg', '#111') 后，页面闪一下白底——不是 JS 慢，是浏览器在重绘前仍按旧变量值渲染了一帧。
根本原因是 CSS 变量是级联计算的，JS 修改后需等待下一个样式计算周期，而首次渲染时 HTML 已解析完毕，变量尚未注入。
- 最稳做法：服务端或构建时注入初始主题类名，如
<html class="theme-dark">，CSS 用.theme-dark { --bg: #111; }定义，完全规避 JS 注入延迟 - 若必须客户端控制，把
<style>标签放在<head>最前面，并在 JS 执行前就写好暗色变量（用内联<style>配合data-theme属性判断） - 别在
DOMContentLoaded之后才初始化主题，改用documentElement.classList在 HTML 解析早期就操作 - 动画过渡？用
transition: background-color 0.2s没用——CSS 变量本身不触发过渡；得用color、background-color等具体属性做中间层映射
复杂点在于，环境光本身不可靠，而用户真实意图常藏在「设置」里。别花时间猜光照，先确保手动开关和系统主题两条路都走稳，再考虑加传感器——那已经是硬件集成范畴了。
