最可靠方式是用 matchmedia('(prefers-color-scheme: dark)') 监听系统暗色模式，它响应系统设置、不受时区和时间不准影响；手动切换需用 thememode 状态隔离自动逻辑，并通过 document.documentelement.classlist 切换 class 实现样式控制。
用 matchMedia 监听系统级暗色模式更可靠
浏览器原生支持的 matchMedia('(prefers-color-scheme: dark)') 是当前最稳妥的夜间模式触发依据。它响应系统设置，不依赖 JavaScript 获取时间、也不受时区或本地时间不准影响。
常见错误是直接用 new Date().getHours() 判断 18–6 点切夜间，结果用户在新疆用北京时间、或设备时间没校准，主题就错乱。
实操建议：
- 优先监听
matchMedia，作为默认行为基础 - 仅当明确需要「强制按本地时间切主题」（如企业内网统一作息），才用时间逻辑，且必须配合时区校验
- 监听后立即调用一次
mediaQuery.matches初始化 class，避免首屏闪动
手动切换时如何覆盖自动逻辑
用户点了“切换主题”按钮后，如果还让 matchMedia 或定时器继续覆盖 DOM，体验会很诡异——刚点完亮色，2 秒后又变暗色。
解决方法是引入一个状态标识，比如 themeMode，值为 'auto'、'light' 或 'dark'：
- 初始设为
'auto'，由matchMedia驱动 - 用户手动切换时，设为
'light'或'dark'，并移除自动监听器 - 加个「恢复自动」按钮，重置为
'auto'并重新绑定matchMedia
别用 localStorage 存布尔值（如 isDark: true），存字符串更易扩展、语义也更清晰。
document.documentElement 上切 class 最省事
所有主题样式都基于 :root 或 html.dark 这类选择器写，那么只需操作 document.documentElement 的 class 列表，CSS 就自动生效，不用重写内联 style 或反复 query 元素。
示例代码片段：
function setTheme(theme) {
document.documentElement.classList.toggle('dark', theme === 'dark');
document.documentElement.classList.toggle('light', theme === 'light');
// 注意：不要同时加两个 class，避免 CSS 优先级冲突
}
容易踩的坑：
- 用
className = 'dark'覆盖整个 class 字符串，会干掉其他必要 class（比如lang-zh） - 用
classList.add('dark')却不remove('light')，导致两个 class 同时存在 - 没在
标签上预设默认 class（如class="light"），首次渲染可能无样式
服务端要不要做 SSR 主题适配
纯静态 HTML + 前端 JS 切主题，对 SEO 和首屏渲染基本没影响；但如果你用 Next.js、Nuxt 或自建 SSR，就得考虑首次 HTML 返回时的主题是否匹配用户偏好。
关键点：
- Node 环境拿不到
prefers-color-scheme，只能靠请求头Sec-CH-Prefers-Color-Scheme（Chrome/Edge 支持，Firefox/Safari 不传） - 更通用的做法是返回中性主题（如无背景色、用系统默认灰），等前端 JS 加载后再立刻切——比赌请求头更稳
- 别在服务端硬塞
darkclass 然后前端再删，会导致 FOUC（闪白/闪黑）
真正难的是跨设备同步：手机设了暗色，桌面浏览器没登录，就还是亮色——这得靠账号体系 + 后端存储，纯前端搞不定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
