必须用 javascript 配合 localstorage 每次加载时重写 :root 变量值，否则主题断连；读不到值常见因键名不一致或未在 domcontentloaded 后执行；应统一键名、用 setproperty 逐个注入、加 try-catch 兜底、按需存字符串或 json 对象。
不能靠 CSS 自己存，必须用 JavaScript 配合 localStorage 每次加载时重写 :root 变量值——漏一次读取或设置，主题就断连。
为什么 localStorage.getItem() 读不到主题值？
常见原因是键名不一致或没在 DOM 加载后执行读取。比如存的是 'theme-primary'，却去读 'ui-theme'；或者脚本放在 里没加 defer，导致执行时 document.documentElement 还不可用。
- 确保读写使用同一 key，例如统一用
'ui-theme'或'theme-palette' - 必须在
DOMContentLoaded后读取：直接监听document.addEventListener('DOMContentLoaded', ...)，别依赖window.onload - 若服务端渲染（SSR），HTML 中
要和 JS 读取逻辑对齐，否则首屏闪动
怎么安全地用 setProperty 注入变量？
直接改 style 属性会清空已有内联样式，必须用 setProperty() 逐个写入。而且得兜底处理非法值，比如空字符串或 JSON 解析失败。
- 不要用
document.documentElement.setAttribute('style', '...') - 每次只设一个变量：
document.documentElement.style.setProperty('--color-bg', '#121212') - 多变量批量更新建议封装成函数，传入对象：
{ '--color-bg': '#121212', '--color-text': '#f0f0f0' } - 务必包
try { ... } catch (e) { }，防止 localStorage 被禁用或值损坏导致脚本中断
存 HEX 值还是存整个主题对象？
取决于你是否需要动态色。预设主题（如 light/dark/blue）存字符串即可；支持自定义主色或完整调色板，就用 JSON.stringify() 存对象。
- 简单场景：
localStorage.setItem('ui-theme', 'dark')，再用 class 控制整体样式 - 动态色场景：
localStorage.setItem('theme-palette', JSON.stringify({ primary: '#4a90e2', text: '#333' }))，读取后JSON.parse()并循环setProperty - 避免存带
--前缀的完整声明，比如'--primary-color: #4a90e2'——localStorage只存纯值 - 键名加前缀防冲突，例如
'theme-primary'比'primary'更稳妥
真正容易被忽略的点是：CSS 变量本身不记忆状态，它只是个占位符；持久化靠的是 JS 每次加载时重写这些占位符的值。只要漏掉一次读取或设置，主题就断连。别依赖“写过一次就永远生效”这种直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
