CSS变量+HSL组合切换主题色的底层逻辑是用:root定义可被JS动态修改的HSL变量，通过层叠实现全局响应；HSL仅调h值即可换主色且保协调，RGB易致对比崩坏。
什么是CSS变量 + HSL组合切换主题色的底层逻辑
本质是用 :root 定义一组可被 JS 动态修改的 HSL 色值变量，再通过 CSS 层叠覆盖实现全局颜色响应。HSL 的优势在于：只改 h（色相）就能切换主色调，s（饱和度）和 l（亮度）保持不变时，整套配色仍协调；而 RGB 改一个值常导致对比度崩坏或发灰。
如何定义可切换的HSL主题变量并避免对比度失效
别直接写死 hsl(200, 100%, 50%) 这类固定值——要拆解为独立变量，方便 JS 精准控制。同时必须为文字/背景配对预留安全对比度空间：
:root {
--hue: 210;
--sat: 85%;
--light-bg: 96%;
--light-text: 12%;
--light-border: 80%;
}
body {
background-color: hsl(var(--hue), var(--sat), var(--light-bg));
color: hsl(var(--hue), var(--sat), var(--light-text));
border-color: hsl(var(--hue), var(--sat), var(--light-border));
}
-
--light-bg和--light-text必须保持足够差值（建议 ≥84%），否则深色模式下文字会看不清 - 不要把
--sat设为100%，高饱和在浅底上易刺眼，85% 是较稳妥的上限 - HSL 的
h值范围是 0–360，但相邻色相（如 190→195）切换时人眼几乎无感，建议步进 ≥15
JS动态修改CSS变量时的常见翻车点
直接 document.documentElement.style.setProperty('--hue', '240') 没问题，但以下情况会导致主题“卡住”或“闪白”：
- 未在
:root中预先声明所有变量——浏览器遇到未定义变量会 fallback 到 inherit 或 transparent，页面瞬间失色 - 在 DOM 加载完成前就执行 JS 修改（比如放在
<head>里）——应确保DOMContentLoaded或至少等<html>渲染后操作 - 用
localStorage读取旧值时未做类型校验：localStorage.getItem('hue') || '210'比localStorage.getItem('hue')更安全
推荐初始化写法：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('DOMContentLoaded', () => {
const savedHue = localStorage.getItem('theme-hue') || '210';
document.documentElement.style.setProperty('--hue', savedHue);
});
为什么不能只靠 prefers-color-scheme 自动切主题
系统级暗色偏好（prefers-color-scheme: dark）只能区分明/暗两档，无法支持多主题（蓝/紫/绿/琥珀）。更关键的是：它不响应运行时切换——用户在系统设置里改了偏好，网页不会自动重绘，除非刷新页面或手动监听 change 事件。
- 监听系统变化需额外加
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...) - 但用户主动点击切换主题时，这个媒体查询根本不会触发，必须靠 JS 显式更新变量
- 真正健壮的做法是：用媒体查询设默认值，再用 JS 覆盖并持久化，二者不互斥
复杂点永远在变量作用域和更新时机——漏掉一次 setProperty，或者在伪元素里用了未定义变量，整块 UI 就可能突然变透明。
