用 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%); /* 浅色模式：极浅蓝灰 */
}
@media (prefers-color-scheme: dark) {
body {
background-color: hsl(210, 10%, 14%); / 深色模式：柔和深蓝灰，非死黑 /
}
}

兼顾系统未启用深色模式时的降级体验

部分用户可能关闭系统深色模式，或使用不支持该特性的旧浏览器。此时应确保默认样式（即不加媒体查询的部分）是可用的浅色方案，并把深色逻辑作为增强：

• 默认写浅色样式（如上面的 body { background-color: ... }）
• 仅在 @media (prefers-color-scheme: dark) 中覆盖深色值
• 无需 fallback JS —— 不支持该媒体查询的浏览器会直接忽略整个块，按默认样式渲染

小技巧：用 calc() 微调亮度偏移（进阶）

如果想让深色背景随浅色背景“自动变暗”而不手动计算，可用 calc() 做简单映射（需配合 CSS 自定义属性）：

:root {
  --bg-lightness: 96;
}
body {
background-color: hsl(210, 8%, calc(var(--bg-lightness) * 1%));
}
@media (prefers-color-scheme: dark) {
:root {
--bg-lightness: 14;
}
}

这样只需改一个数字，就能同步更新所有用到该变量的 HSL 背景，适合组件化场景。

基本上就这些。核心是：HSL 控制亮度更直观，媒体查询做无侵入适配，留好默认样式作兜底 —— 不复杂但容易忽略细节。