闪屏因CSS变量未设默认值且媒体查询加载时机不当导致：:root需预设--bg等变量，默认值+html[data-theme="dark"]覆盖，data-theme和须同步更新。
为什么在线运行器里直接写 @media (prefers-color-scheme: dark) 会闪屏
因为多数 HTML 在线运行器（如 JSFiddle、CodePen、JSBin）不保证 CSS 加载顺序和 DOM 就绪时机，@media 规则里的 --bg 变量若未在 :root 中提前定义，默认值是 initial，导致 background-color: var(--bg) 渲染为透明或失效，页面先白后黑——这就是闪屏。关键不是媒体查询本身错，而是变量兜底缺失 + 样式注入时机不可控。
document.documentElement.dataset.theme 必须在 DOMContentLoaded 前设置
在线运行器常把 JS 放 底部或用 onload，但此时 DOM 已渲染完毕，html[data-theme="dark"] 的样式来不及参与首帧绘制。正确做法是：把初始化逻辑塞进 <script></script> 标签并放在 末尾，且必须用同步执行方式：
- 读
localStorage.getItem("theme")，若为"dark"或"light"，直接设document.documentElement.dataset.theme = value - 若返回
null，立刻调用window.matchMedia("(prefers-color-scheme: dark)").matches判断，并设对应值 - 绝不能等
DOMContentLoaded或load事件——它们太晚了
CSS 变量必须写在 :root 且带默认值，[data-theme="dark"] 只覆盖
在线运行器不支持服务端直出，所以不能依赖 SSR 注入 data-theme。所有主题变量必须靠 CSS 自包含，否则切换时部分元素颜色丢失。错误写法：@media (prefers-color-scheme: dark) { :root { --bg: #121212; } }；正确写法：
:root {
--bg: #ffffff;
--text: #333333;
}
html[data-theme="dark"] {
--bg: #1a1a1a;
--text: #e0e0e0;
}
body {
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s, color 0.3s;
}
注意：html[data-theme="dark"] 不能简写成 [data-theme="dark"]，否则第三方样式或内联 style 可能覆盖它；transition 要写在 body 或根级元素上，否则切换无动画。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
手动切换按钮必须同步 localStorage 和 <meta name="color-scheme">
在线运行器生成的页面没有后端，<meta name="color-scheme"> 是唯一能让 Chrome/Safari 主动调整地址栏、表单边框、滚动条颜色的手段。只改 data-theme 不改 meta，会出现「页面暗了，但输入框还是亮色边框」的割裂感。切换逻辑必须包含：
- 点击时计算下一个主题（
dark↔light） - 执行
document.documentElement.dataset.theme = nextTheme - 执行
localStorage.setItem("theme", nextTheme) - 更新
document.querySelector('meta[name="color-scheme"]').content = "light dark"
漏掉最后一步，在安卓 Chrome 或 Safari 上夜间模式体验就断层——这是在线运行环境最容易被忽略的硬性要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
