切换主题需同步更新data-theme属性、css变量和三者；推荐值为"light"/"dark"，css选择器须匹配且带html前缀，localstorage持久化优先于prefers-color-scheme，按钮须为并设aria-pressed。
点击按钮切换网页主题颜色，核心是同步更新 data-theme 属性、CSS 变量、<meta name="color-scheme"> 三者，缺一不可；只改 class 或只切 CSS 媒体查询会失效或闪屏。
确保 JavaScript 设置的 data-theme 值与 CSS 选择器完全一致
常见错误是 JS 写 document.documentElement.setAttribute('data-theme', 'dark')，但 CSS 里却写 [data-theme="theme-dark"] —— 字符串不匹配，样式根本不会生效。
- 统一约定值：推荐用
"light"和"dark"（简洁、语义明确），避免"theme-light"这类冗余前缀 - CSS 必须带
html前缀：html[data-theme="dark"] { --bg: #111; --text: #eee; }，否则子元素规则可能覆盖它 - 不要依赖
.darkclass：老项目中 class 可能被第三方库污染，data-theme更隔离、更可控
切换时必须同步更新 <meta name="color-scheme">
安卓 Chrome 93+ 和 Safari 会读这个 meta 控制地址栏、表单控件等系统 UI 颜色。JS 改了页面主题但忘了它，就会出现“页面已变暗，输入框边框还是亮色”的割裂感。
- 初始加载时也要设一次：
document.querySelector('meta[name="color-scheme"]').content = savedTheme === "dark" ? "light dark" : "light" - 每次点击后立即更新：
document.querySelector('meta[name="color-scheme"]').content = theme === "dark" ? "light dark" : "light" - 该 meta 不支持动态响应系统变更，仅用于声明当前页面倾向；监听
prefers-color-scheme变化需另起逻辑
用 localStorage 持久化用户选择，且优先级高于 prefers-color-scheme
用户点按钮选了深色，刷新后又回退到系统设置，是因为代码把 prefers-color-scheme 当成了唯一来源——它只是默认值，不是用户意志。
- 首次加载顺序：先查
localStorage.getItem('theme')，有则直接用；无则 fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches - 按钮点击后必须存：
localStorage.setItem('theme', theme)，别只改 DOM - 注意：Safari 的 Private Browsing 模式下
localStorage可能抛错，加 try/catch 更稳妥
按钮本身必须是 <button></button> 元素，禁用纯 CSS :checked + label 实现
用 checkbox + label + :checked 伪类看似“无 JS”，实则无法持久、无法响应系统主题变化、无法被屏幕阅读器正确识别状态。
- 按钮要带
aria-pressed：button.setAttribute('aria-pressed', theme === 'dark')，辅助技术才知当前状态 - 监听系统变化并更新按钮状态：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)，但仅用于同步 UI，不覆盖用户手动选择 - 过渡动画建议加在 body 或 html 上：
transition: background-color 0.3s, color 0.3s，避免卡顿
最易忽略的是 <meta name="color-scheme"> 同步和 data-theme 值的大小写/拼写一致性——这两个点出错，其他全对也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
