只需在页面加载时读取 localStorage 中的暗黑模式设置并应用，切换时写入，即可实现跨会话持久化；需安全解析布尔值、统一控制 class、封装 toggle 函数、监听 storage 事件同步多标签页，并兼顾可访问性与 CSS 渐进增强。
只需在页面加载时读取 localStorage 中的暗黑模式设置，并在切换时写入，就能让用户的偏好跨浏览器会话持久保存。
初始化时读取并应用主题状态
页面首次加载或刷新时，应检查 localStorage 是否已存有 darkMode 的值（如 "true" 或 "false"），并据此为 或 添加对应 class（如 dark），同时同步更新 CSS 变量或 link 标签。注意要处理值不存在或非法的情况，默认可回退到系统偏好或亮色模式。
- 使用
localStorage.getItem('darkMode')获取字符串值 - 用
JSON.parse()安全转为布尔值，避免直接比较字符串 - 通过
document.documentElement.classList.toggle('dark', isDark)统一控制根元素样式
切换时实时保存并同步界面
当用户点击开关、按下快捷键（如 Ctrl+D）或监听系统级暗色偏好变化时，需立即更新 DOM 并写入 localStorage。推荐封装一个 toggleDarkMode() 函数，内部完成状态翻转、class 切换、CSS 变量注入和存储写入四步操作。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 调用
localStorage.setItem('darkMode', JSON.stringify(isDark))确保布尔值被正确序列化 - 避免重复写入：可在设置前比对当前值，减少不必要的 storage event 触发
- 配合
prefers-color-scheme媒体查询做兜底，增强兼容性
监听 storage 变化实现多标签页同步
如果用户在另一个标签页中切换了暗黑模式，当前页也应响应变化。监听 window 上的 storage 事件，检查 key 是否为 darkMode，再重新读取并更新 UI。
立即学习“前端免费学习笔记（深入）”；
- 事件回调中用
event.newValue获取新值，而非再次读取 localStorage - 注意该事件仅在其他标签页触发，当前页修改不会触发自身，所以不影响性能
- 建议在初始化后绑定，确保生命周期可控
兼顾可访问性与渐进增强
暗黑模式不仅是视觉切换，还涉及对比度、焦点样式、图片适配等。localStorage 存储的只是状态标记，真正的样式逻辑应由 CSS（如 @media (prefers-color-scheme: dark)）或 JS 注入的 class 控制。同时为按钮添加 aria-pressed 属性，让屏幕阅读器能感知当前状态。
- 将主题切换按钮设为
role="switch"，提升语义化 - 使用
color-scheme: dark light告知浏览器你支持双主题，优化表单控件渲染 - 图片可借助
picture+source media="(prefers-color-scheme: dark)"实现主题适配
