用 new Date().getHours() 获取当前小时，按区间映射日/夜主题，通过 document.documentElement.style.setProperty() 动态设置语义化 CSS 变量（如 --theme-bg-primary），优先尊重 prefers-color-scheme，辅以 localStorage 覆盖和缓冲区间提升体验。
如何用 JS 获取当前小时并动态设置 CSS 变量
核心是用 new Date().getHours() 拿到 0–23 的整数，再根据区间映射到预设主题（比如 6–17 是日间，18–5 是夜间），最后用 document.documentElement.style.setProperty() 注入变量。别直接改 :root 标签文本——DOM 操作慢且难维护。
- 注意时区：
getHours()返回本地时间，如果服务端渲染或跨时区用户需要统一用 UTC（getUTCHours()） - 避免每秒轮询：只在页面加载时执行一次，或监听
visibilitychange+focus做轻量重检 - 推荐把主题逻辑封装成函数，比如
setThemeByHour()，便于后续扩展节气、天气等维度
CSS 变量命名与主题分组怎么组织才不混乱
别用 --bg-color 这种泛名，容易被覆盖或误用。按语义+状态分层，例如 --theme-bg-primary、--theme-text-secondary，再配合 --theme-mode: "day" | "night" 作为开关变量。
- 所有颜色变量必须在
:root中声明默认值（哪怕只是占位），否则未匹配时段会导致变量为unset，样式断裂 - 夜间模式慎用纯黑
#000，推荐#121212或#1e1e1e减少视觉疲劳 - 如果支持用户手动覆盖（如 localStorage 记录偏好），JS 设置前先读取
localStorage.getItem('theme')，有值则跳过自动逻辑
为什么 document.documentElement.style.setProperty 不生效
最常见原因是 CSS 变量名拼写错误或作用域错位。例如写了 --text-color 却在 CSS 里用 color: var(--text-colour)（英式拼写）；或者在某个 class 内部重复声明了同名变量，覆盖了根级设置。
- 调试技巧：打开 DevTools → Elements → :root → Styles 面板，看右侧是否出现你 set 的变量（带「自定义属性」标记）
- 确保调用时机在 DOM ready 之后，不要放在
的 script 里直接执行（此时document.documentElement已存在，但部分浏览器可能 style 对象未就绪） - 若用 Webpack/Vite，检查 CSS 是否被提取为独立文件且加载顺序在 JS 之后——变量必须先声明，才能被
var()引用
要不要加 CSS transition 平滑过渡换肤
要，但只对颜色类变量加，且控制在 200ms 内。用 transition: background-color 0.2s, color 0.2s，别写 all 0.2s——字体大小、阴影、transform 等突变会引发重排重绘，卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 避免在
:root上直接写transition，应写在具体选择器上，比如body, .card, .btn - 夜间切换时，图片亮度可能突兀，可额外加
filter: brightness(0.9)变量，并同步过渡 - 深色模式下，
prefers-color-scheme: dark可能与你的小时逻辑冲突，建议 JS 中检测window.matchMedia('(prefers-color-scheme: dark)').matches，优先级高于时间判断（尊重系统偏好）
