深色模式无法仅靠css实现全局生效，html结构缺陷（如语义缺失、内联样式、js渲染）会阻断@media(prefers-color-scheme:dark)继承；需修复语义标签、清除内联颜色、适配表单与svg、单独处理canvas/iframe。
深色模式不是加个 class 或改几行 CSS 就能“全局生效”的——HTML 结构本身会直接影响适配效果，尤其在语义缺失、内联样式滥用、或依赖 JS 动态渲染的场景下，CSS @media (prefers-color-scheme: dark) 很可能失效或局部错乱。
语义化标签缺失导致深色模式下文字不可读
很多页面用 div 堆砌内容，不区分 article、aside、section 等语义容器，结果所有区块统一套用深色背景，但嵌套的 blockquote 或 pre 未单独定义文本颜色，直接变成白字配白底。
- 检查是否对
blockquote、code、pre、kbd等内建文本容器显式声明color和background-color - 避免用
div class="card"替代article或section，否则无法通过语义层级继承深色主题变量 - 特别注意表单控件：
input[type="text"]、textarea在深色模式下默认无背景色，需手动设background-color: Canvas;（而非硬编码#1e1e1e）
prefers-color-scheme 不生效的常见 HTML 原因
媒体查询没起作用，往往不是 CSS 写错了，而是 HTML 阻断了继承链：比如根元素 被 JS 强制加了 style="background: white"，或者 上有内联 bgcolor 属性（已废弃但仍有遗留）。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 删除所有内联
style中涉及颜色/背景的硬编码值，改用 CSS 自定义属性（如--bg: Canvas;） - 确保
和没有bgcolor、text、link等过时属性 - 若使用 SSR 框架（如 Next.js、Nuxt），确认 HTML 初始响应中未预设
data-theme="light"并覆盖了系统偏好
第三方组件库与自定义 HTML 混合时的冲突点
像 Bootstrap、Ant Design 这类库自带深色主题开关，但它们通常只作用于自己的 class（如 .btn、.ant-table），而你手写的 <figure><figcaption></figcaption></figure> 或 <details><summary></summary></details> 完全不受控。
- 对非组件库控制的原生语义标签，必须单独写
@media (prefers-color-scheme: dark) { ... }规则 - 避免用
!important强行覆盖第三方样式，优先用更具体的选择器（如article figure figcaption）提升权重 - 注意
<svg></svg>图标：系统深色模式下fill="currentColor"才能随文本色自动变色；若写死fill="#333"，就会在深色背景下消失
最易被忽略的是 <canvas></canvas> 和 <iframe></iframe>：前者完全不响应 prefers-color-scheme，需 JS 检测后重绘；后者加载的外部页面主题由其自身控制，父页 CSS 无效。这类节点得单独处理，不能指望 CSS 全局兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
