data-theme 应写在 <html> 标签上，值用小写短横线格式（如 dark），JS 通过 dataset.theme 读写；CSS 用 [data-theme="xxx"] 预定义变量；为防闪屏，需在 <head> 内联脚本中优先设置主题并同步 localStorage。
data-theme 属性怎么写才被 JS 正确读取
HTML 中的 data-theme 必须写在根元素（通常是 <html> 或 <body>）上，JS 才能统一控制全局样式作用域。写在某个 <div> 里只影响局部，换肤会失效。
常见错误是把主题值写成大写或带空格，比如 data-theme="Dark Mode" —— 这会导致 JS getAttribute() 拿到后无法匹配 CSS 类名。应严格用小写、短横线分隔的语义化值：
<html data-theme="light"><html data-theme="dark"><html data-theme="sepia">
用 dataset.theme 读写比 getAttribute() 更安全
dataset 是原生 DOM API 提供的映射对象，自动处理驼峰转换：HTML 里写 data-theme，JS 里就用 dataset.theme；写 data-user-id，就用 dataset.userId。它比手动 getAttribute('data-theme') 更简洁，且在属性不存在时返回 undefined 而非 null，减少判空出错。
切换主题的核心逻辑就是两步：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.dataset.theme = 'dark'- 触发 CSS 变量重计算（无需手动操作
style）
CSS 里用 [data-theme="xxx"] 做作用域隔离
不要用 JS 动态插入 <style> 标签或修改 document.styleSheets —— 难维护、易冲突、不支持 SSR。正确做法是在 CSS 文件中预先写好各主题规则块：
html[data-theme="dark"] {
--bg-color: #1e1e1e;
--text-color: #e0e0e0;
}
html[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #333333;
}
这样所有用到 var(--bg-color) 的地方会自动响应。注意：[data-theme] 选择器必须带具体值，不能只写 [data-theme]，否则会覆盖所有主题分支。
localStorage 保存主题后如何避免闪屏
用户刷新页面时，浏览器先渲染 HTML，再执行 JS。如果 JS 在 DOMContentLoaded 里才读 localStorage 并设 dataset.theme，就会先显示默认主题（比如 light），再跳变成 dark —— 就是“闪屏”。
解决方法是在 HTML 的 <head> 里加一段内联脚本（必须在任何 CSS 之前）：
<script>
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.dataset.theme = saved;
</script>
这样 DOM 构建阶段主题就已生效，CSS 会直接按正确主题渲染。别忘了在 JS 切换主题时同步更新 localStorage.setItem('theme', 'dark')。
真正麻烦的是系统偏好（prefers-color-scheme）和用户手动选择的优先级冲突 —— 如果用户选了 dark，又开了系统自动切换，得明确以用户选择为准，这点容易被忽略。
