直接用 localstorage 存主题名字符串（如 "dark" 或 "github"），页面加载时立即读取并设到 上，切换时实时写入、同步更新样式类和 css 变量——关键在时机和结构，不复杂但容易忽略细节。
直接用 localStorage 存主题名字符串（如 "dark" 或 "github"），页面加载时立即读取并设到 上，切换时实时写入、同步更新样式类和 CSS 变量——关键在时机和结构，不复杂但容易忽略细节。
主题配置与 CSS 预设要对齐
先在 CSS 中定义几套 Markdown 主题类，统一作用于 html 元素，避免挂载在 body 上导致闪屏：
html.theme-light { --md-bg: #fff; --md-text: #333; }html.theme-dark { --md-bg: #1e1e1e; --md-text: #e0e0e0; }html.theme-github { --md-bg: #f6f8fa; --md-text: #24292e; }
所有 Markdown 渲染容器（如 .markdown-body）用 CSS 自定义变量控制样式，确保主题一换，全文档响应式更新。
存取逻辑要简洁可靠
用固定 key（如 "md-theme"）存纯字符串，不存对象；读写都加基础容错：
- 切换时：
localStorage.setItem("md-theme", "dark")，然后document.documentElement.className = "theme-dark" - 加载时：用内联脚本在
里执行，const saved = localStorage.getItem("md-theme"); if (saved) document.documentElement.className = `theme-${saved}` - 捕获
SecurityError（如 iOS 隐私模式）：try { ... } catch (e) { if (e.name === "SecurityError") console.warn("本地存储不可用，降级为系统偏好"); }
支持系统级 fallback 更稳妥
若 localStorage 不可用或为空，自动回退到 prefers-color-scheme：
- 检测
window.matchMedia("(prefers-color-scheme: dark)").matches - 匹配后设
document.documentElement.className = "theme-dark"，同时不写入 localStorage（避免覆盖用户主动选择） - 可在设置页加一个“跟随系统”开关，点击时清除
"md-theme"并监听matchMedia变化
避免常见坑点
几个高频出错环节需特别注意：
- 别等
DOMContentLoaded再设主题类——那时 CSS 已渲染，必然闪屏；必须在 HTML 解析阶段就完成 - 不要把主题类名和 localStorage 值搞混，比如存
"dark-mode"却在 CSS 里写.theme-dark，类名不匹配就失效 - 不存敏感信息，也不存大段 CSS 或渲染结果；Markdown 主题偏好只需 5–10 字符，完全在安全容量内
- 首次访问无存储时，给合理默认（如
light），而不是留空或报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
