prefers-color-scheme 是纯 CSS 媒体查询，用于响应系统深色/浅色偏好，需先写基础样式再用 @media 覆盖暗色模式，避免漏掉浅色适配；护眼模式须重构色彩系统而非简单降亮；用户手动切换应分层存储状态，双模式叠加推荐用 CSS 自定义属性与 color-mix() 动态混合。
用 prefers-color-scheme 捕获系统级暗黑偏好
浏览器能直接读取用户操作系统设置的深色/浅色模式，prefers-color-scheme 就是那个开关。它不是 JS API，而是纯 CSS 媒体查询能力，所以加载快、无闪屏、兼容性好（Chrome 76+、Firefox 67+、Safari 12.1+ 都支持）。
常见错误是只写 @media (prefers-color-scheme: dark)，却漏掉默认浅色样式——结果 Windows/macOS 用户切到浅色模式时，页面可能一片白底黑字但按钮没边框、图标不可见。
- 必须先写基础样式（不带媒体查询），再用
@media覆盖暗色部分 - 别在 JS 里监听
matchMedia后手动切 class：除非你要加动画或记录用户偏好，否则纯 CSS 更稳 - 移动端 Safari 对
prefers-color-scheme的响应有延迟（尤其从后台切回），别依赖它做关键布局计算
护眼模式不能只靠降低亮度
“护眼”不是“调暗”，而是减少蓝光、提升对比度柔和度、避免刺眼高饱和色。单纯给 body 加 filter: brightness(0.8) contrast(0.9) 会让所有图片发灰、文字糊成一片。
真正可用的护眼模式，得从色彩系统重构入手：
立即学习“前端免费学习笔记（深入）”；
- 主色调改用低饱和暖灰（如
#e6e1d5替代白色，#2a2620替代纯黑） - 禁用
hsl(240, 100%, 50%)这类高蓝度色值，改用hsl(30, 15%, 40%)类暖棕系 - 链接、按钮等交互元素保留足够明度差（至少 4.5:1），否则护眼=看不清
- 字体抗锯齿在低亮度下易发虚，加
text-rendering: optimizeLegibility有帮助
用户手动切换时，如何存状态又不污染 localStorage
系统偏好可读，但用户主动点“切到护眼模式”就得记下来——否则刷新就丢。但直接塞 localStorage.setItem('theme', 'eye') 会覆盖系统判断逻辑，导致用户关掉系统暗黑后页面还固执地黑着。
正确做法是分层存储：
- 用
localStorage存用户显式选择（themeMode: 'auto' | 'light' | 'dark' | 'eye'） - 用
matchMedia('(prefers-color-scheme: dark)')实时监听系统变化 - CSS 里按优先级写：用户选择 > 系统偏好 > 默认
- 注意 Safari 私密模式下
localStorage可能被禁用，得加 try/catch，fallback 到sessionStorage或内存变量
暗黑 + 护眼双模式叠加时的颜色变量怎么组织
别用一堆独立 class（.dark .eye、.eye .dark）硬组合，维护爆炸。CSS 自定义属性才是解法，但要注意作用域和 fallback。
核心是把颜色拆成语义层（--bg-primary）、模式层（--mode-dark）、护眼层（--mode-eye），再用 color-mix() 或 hsl() 动态混合：
html[data-theme="eye"] {
--bg-primary: color-mix(in srgb, #f8f5f0 80%, #e6e1d5 20%);
}
html[data-theme="dark"][data-theme="eye"] {
--bg-primary: color-mix(in srgb, #2a2620 70%, #3a342b 30%);
}
注意：color-mix() 目前仅 Chrome 111+ 支持，旧浏览器得降级用 hsl() 计算或预设几组固定值；data-theme 属性必须由 JS 同步更新，不能只靠 class。
最麻烦的其实是 SVG 图标和 canvas 内容——它们不继承 CSS 变量，得单独处理 fill/stroke 或用 currentcolor 透传。
