直接用LocalStorage存CSS变量不可行，因其仅支持字符串存储；正确做法是将颜色值（如#4a90e2）存入LocalStorage，再通过JavaScript读取并用document.documentElement.style.setProperty()动态注入:root，实现主题色持久化与实时生效，同时需加try-catch容错及CSS默认值兜底。
直接用 LocalStorage 存 CSS 变量本身不可行，因为 LocalStorage 只能存字符串，而 CSS 变量（如 --primary-color）是运行时生效的样式机制。真正可行的做法是：把颜色值（比如 #4a90e2）作为字符串存进 LocalStorage，再用 JavaScript 读取后动态注入到 :root 的 CSS 规则中——这样变量就“活”了，页面也能记住上次选的主题色。
存什么：只存颜色值，不存变量语法
用户选中主题色后，不要试图存 "--primary-color: #4a90e2" 这种字符串。应拆解为语义清晰的键值对，例如：
localStorage.setItem('theme-primary', '#4a90e2')localStorage.setItem('theme-bg', '#ffffff')localStorage.setItem('theme-text', '#333333')
统一用 theme- 前缀，便于批量清理或调试；所有值必须是合法 CSS 颜色字符串（#rrggbb、rgb()、hsl() 等），避免用命名色（如 blue），否则后续无法参与计算或 JS 读取数值。
怎么读：页面加载时立即注入 :root
不能等 DOM 完全就绪才操作，否则会闪屏。推荐在 <head> 内放一段内联脚本，在 HTML 解析阶段就执行：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<script>
const primary = localStorage.getItem('theme-primary') || '#4a90e2';
const bg = localStorage.getItem('theme-bg') || '#ffffff';
const text = localStorage.getItem('theme-text') || '#333333';
document.documentElement.style.setProperty('--primary-color', primary);
document.documentElement.style.setProperty('--bg-color', bg);
document.documentElement.style.setProperty('--text-color', text);
</script>
注意用 document.documentElement（即 <html> 元素）调用 setProperty()，比操作 <style> 标签更轻量、更可靠，也兼容 Shadow DOM。
怎么切：更新变量 + 同步存储，不跳变
点击换肤按钮时，两个动作必须原子化执行：
- 先调用
localStorage.setItem()写入新颜色值 - 再立刻用
setProperty()更新对应 CSS 变量
不要只改某个元素的 style，否则伪类（::before）、子组件或 SVG 中的 fill 不会响应；也不要删掉再重写整个 <style>，那样可能触发重排。用 setProperty() 是最直接、零延迟的方式。
兜底与容错：别假设 LocalStorage 总可用
iOS Safari 隐私模式、某些 WebView 或 Strict-Origin-Isolation 环境下，localStorage 可能静默失效。安全写法是：
- 写入前加
try { localStorage.setItem(...) } catch (e) { /* fallback to prefers-color-scheme or default */ } - 读取时判断返回是否为
null，而不是直接当字符串用 - 默认值必须在
:root中预先声明，确保无 JS 或存储失败时页面仍可读
CSS 里要写：
:root {
--primary-color: #4a90e2;
--bg-color: #ffffff;
--text-color: #333333;
}
这样即使 JS 不执行，基础样式也有保障。
