用户手动选择的主题永远优先于系统偏好，localstorage 有值时直接使用且忽略系统偏好；为空时才用 matchmedia 默认，并立即同步；需设置 meta color-scheme 和统一 css 变量。
用户手动选的主题永远优先于系统偏好，这是唯一安全的逻辑起点。别让 window.matchMedia("(prefers-color-scheme: dark)") 的返回值直接覆盖 localStorage 里存的值——那会把用户明确点过的“我要亮色”给悄悄改回暗色。
localStorage 有值时，完全忽略系统偏好
只要 localStorage.getItem("theme") 返回了 "light" 或 "dark"，就立刻用它，不查系统、不监听 change、不二次判断。这是用户意志的最终体现。
- 错误做法：每次加载都先读系统偏好，再看 localStorage 是否为空，最后才决定用哪个——这会导致“用户刚切完亮色，刷新页面又变暗”
- 正确顺序：读 localStorage → 有值？→ 直接设
document.documentElement.dataset.theme→ 结束 - 兼容性注意：Safari 旧版对
dataset初始化支持不稳定，建议用setAttribute("data-theme", value)
localStorage 为空时，才用 matchMedia 做默认
这时候系统偏好才是合理兜底方案，但必须“立即同步”，不能等 DOMContentLoaded 之后再执行。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 闪屏根源：HTML 渲染时
没写死，JS 又晚于 CSS 加载，导致浏览器先按无主题渲染一遍，再重绘 - 解法：在
<script></script>标签内（最好放在底部）立即执行初始化逻辑 - 别只调一次
matches：用window.matchMedia("(prefers-color-scheme: dark)").matches获取当前值，别依赖事件监听器来“补救”
系统主题变了，但用户没点按钮，要不要响应？
要，但仅限于用户从未手动选择过主题的情况。一旦 localStorage 里有值，change 事件监听就该被忽略。
- 监听代码必须带守卫：
if (!localStorage.getItem("theme")) { /* 更新 data-theme */ } - 错误现象：用户设了亮色，系统切到暗色，页面跟着变暗——这不是适配，是背叛
- 别漏掉
meta[name="color-scheme"]：加<meta name="color-scheme" content="light dark">让原生控件（输入框、滚动条）也同步，否则会出现“页面暗了，但输入框边框还是白的”
最易被忽略的点：CSS 变量必须在 :root 里定义默认值，且所有颜色、边框、阴影都得走变量；任何一处硬编码（比如 style="background: #121212"）都会让主题系统彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
