真正要的是“暗色覆盖层+文字反色”，应通过添加dark-mode类、css变量统一管理颜色、兼顾表单/图片/伪元素等细节，并优先级高于prefers-color-scheme，确保可访问性与兼容性。
点击按钮后整个页面变黑，但保留文字可读性
直接改 document.body.style.backgroundColor 为黑色容易让默认文字（如 <p></p>、<h3></h3>）也变不可见——因为多数浏览器默认文字是黑色。真正要的是「暗色覆盖层 + 文字反色」，不是单纯刷背景色。
- 最稳妥做法：给
body添加一个类名（如dark-mode），用 CSS 控制整体色调 - 避免直接操作内联样式，否则后续恢复困难、易被其他样式覆盖
- 记得同时反转文字、链接、边框等关键颜色，否则按钮或链接会消失
用 JavaScript 切换 class 实现开关逻辑
不要用 style.display = 'none' 或遮罩层盖住内容——那会阻断交互、影响可访问性（screen reader 读不到）、破坏 SEO。真正的“关灯”是视觉降噪，不是隐藏内容。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 绑定按钮的
onclick或addEventListener('click', ...) - 用
document.body.classList.toggle('dark-mode')切换状态 - 加个本地存储记录状态：
localStorage.setItem('darkMode', 'on')，刷新后保持 - 初始化时检查：
if (localStorage.getItem('darkMode') === 'on') document.body.classList.add('dark-mode')
CSS 中定义 dark-mode 类的细节要点
只写 .dark-mode { background: #000; color: #fff; } 远不够。表单控件、图片、SVG、伪元素、第三方组件（如代码高亮块）都会漏掉。
- 必须重置所有常见元素：
input、textarea、button、select的背景和文字色 - 图片默认不透明，会在黑背景下“发灰”，加
.dark-mode img { opacity: 0.92; }微调观感 - 慎用
filter: invert(1) hue-rotate(180deg)—— 它会让图片、图标全反色，破坏语义（红色警告图标变青色） - 推荐用 CSS 变量统一管理：
:root { --bg: #fff; --text: #000; } .dark-mode { --bg: #000; --text: #fff; }，再全局应用
移动端 Safari 和旧版 Edge 的兼容性陷阱
prefers-color-scheme 是自动适配系统主题的捷径，但它和手动“关灯”按钮冲突——用户点了按钮强制暗色，结果系统切回亮色又触发媒体查询覆盖你的设置。
- 手动模式优先级必须高于媒体查询：用
.dark-mode类选择器权重压过@media (prefers-color-scheme: dark) - Safari 15.4+ 才支持
color-scheme: dark告诉浏览器“我支持暗色”，否则表单控件仍按亮色渲染 - 旧 Edge（非 Chromium 版）不支持
classList.toggle的第二个参数（force），别写toggle('dark-mode', true)
style 属性、以及未被选中的伪类（比如 a:visited 在暗色下可能还是紫色）。关灯不是加一层黑，而是重校准整页色彩契约。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
