CSS无法持久化存储，必须由JavaScript通过localStorage存取纯色值（如'#4a90e2'），再用document.documentElement.style.setProperty()动态注入:root变量，且需在DOMContentLoaded后读取并设置，配合默认值与try...catch确保稳定生效。
不能直接用 CSS 实现持久化存储——CSS 本身没有读写本地存储的能力，所有“持久化”逻辑必须由 JavaScript 驱动，CSS 只负责定义和响应变量或类名变化。
localStorage.setItem() 存的是颜色值，不是 CSS 变量语法
常见错误是试图存 --primary-color: #4a90e2 这种字符串。LocalStorage 只接受字符串值，但 CSS 变量需要运行时注入到 :root 才生效。所以只存纯值：
- 存
localStorage.setItem('theme-primary', '#4a90e2')，而不是带变量名的完整声明 - 键名建议统一前缀，如
theme-primary、theme-bg，避免和其他业务 key 冲突 - 若需存多色方案，可用 JSON 字符串：
localStorage.setItem('theme-palette', JSON.stringify({ primary: '#4a90e2', text: '#333' }))
document.documentElement.style.setProperty() 是最简动态注入方式
相比插入 <style> 标签或操作 document.styleSheets，直接设 :root 属性更轻量、兼容性更好，且能被所有 var(--xxx) 正确继承：
- 读取后立即调用：
document.documentElement.style.setProperty('--primary-color', primaryValue) - 务必加
try...catch，防止 localStorage 被禁用或值非法导致脚本中断 - 不要在 DOM 加载完成前执行，否则可能被后续 CSS 覆盖；推荐在
DOMContentLoaded后触发 - 如果页面已用
data-theme="dark"控制主题类，仍需同步设置变量，否则伪元素、子组件内var()无法响应
页面加载时必须先读再设，否则出现闪屏
用户看到白底黑字再突然变深色，本质是样式应用晚于 HTML 渲染。关键顺序不能错：
立即学习“前端免费学习笔记（深入）”；
- HTML 中尽早声明
<script>（放在<head>底部或使用defer） - JS 初始化阶段第一件事：读
localStorage.getItem('theme-primary') - 拿到值后立刻调用
style.setProperty()，再让页面继续渲染 - 未命中时必须提供默认值，例如
const primary = stored || '#1890ff'，不能留空或undefined - 若同时支持系统偏好（
prefers-color-scheme），应在 localStorage 无值时 fallback，而非覆盖用户手动选择
真正容易被忽略的点在于：CSS 变量本身不“记忆”，它只是个占位符；持久化靠的是 JS 每次加载时重写这些占位符的值。只要漏掉一次读取或设置，主题就断连。别依赖“写过一次就永远生效”这种直觉。
