用 prefers-color-scheme 媒体查询配合 HSL 模型可精准控制深色模式背景亮度，仅调整 L 值即可线性明暗变化，避免纯黑刺眼；默认浅色样式兜底，深色逻辑用媒体查询原生覆盖，支持自动 calc() 微调。
直接用 prefers-color-scheme 媒体查询配合 HSL 颜色模型，能精准控制深色模式下的背景亮度，避免生硬切换或过曝问题。
用 HSL 替代 HEX/RGB，方便动态调亮/调暗
HSL（色相、饱和度、亮度）的优势在于：只改 L（Lightness）值 就能线性调整明暗，不破坏原有色调。比如浅灰背景 hsl(0, 0%, 95%) 在深色模式下可改为 hsl(0, 0%, 12%)，既保持中性灰，又足够沉稳。
- 浅色模式常用 L 值：85%–98%
- 深色模式推荐 L 值：8%–20%，避免纯黑（
hsl(0,0%,0%)）造成刺眼对比 - 饱和度（S）建议保持较低（0%–10%），尤其背景色，防止视觉干扰
用 @media (prefers-color-scheme: dark) 精准覆盖
不要依赖 JS 或 CSS 变量“开关”，媒体查询是原生、轻量、可被浏览器提前解析的方案。把深色模式样式写在查询块内，确保优先级和可维护性：
body {
background-color: hsl(210, 8%, 96%); /* 浅色模式：极浅蓝灰 */
}
<p>@media (prefers-color-scheme: dark) {
body {
background-color: hsl(210, 10%, 14%); /<em> 深色模式：柔和深蓝灰，非死黑 </em>/
}
}兼顾系统未启用深色模式时的降级体验
部分用户可能关闭系统深色模式，或使用不支持该特性的旧浏览器。此时应确保默认样式（即不加媒体查询的部分）是可用的浅色方案，并把深色逻辑作为增强：
立即学习“前端免费学习笔记（深入）”；
- 默认写浅色样式（如上面的
body { background-color: ... }） - 仅在
@media (prefers-color-scheme: dark)中覆盖深色值 - 无需 fallback JS —— 不支持该媒体查询的浏览器会直接忽略整个块，按默认样式渲染
小技巧：用 calc() 微调亮度偏移（进阶）
如果想让深色背景随浅色背景“自动变暗”而不手动计算，可用 calc() 做简单映射（需配合 CSS 自定义属性）：
:root {
--bg-lightness: 96;
}
<p>body {
background-color: hsl(210, 8%, calc(var(--bg-lightness) * 1%));
}</p><p>@media (prefers-color-scheme: dark) {
:root {
--bg-lightness: 14;
}
}这样只需改一个数字，就能同步更新所有用到该变量的 HSL 背景，适合组件化场景。
基本上就这些。核心是：HSL 控制亮度更直观，媒体查询做无侵入适配，留好默认样式作兜底 —— 不复杂但容易忽略细节。
