只靠@media (prefers-color-scheme: dark)会排版错乱，因其仅改变颜色而忽略视觉层级与可读性，需显式重置border、shadow、outline、filter等，并统一用data-theme控制变量与样式。
为什么只靠 @media (prefers-color-scheme: dark) 会排版错乱
媒体查询本身不改 HTML 结构，只改样式；但深色模式下字体对比度、行高感知、图片可读性都会变——如果只调背景和文字色，<pre> 里的浅灰代码、<input> 的默认边框、SVG 图标颜色可能直接消失或刺眼。常见现象是：系统切深色后，表单控件“看不见”，代码块“糊成一片”，按钮边框“融进背景”。
真正要适配的不是“颜色”，而是视觉层级和可读性。必须显式重置：border-color、box-shadow、outline、filter（用于 SVG/图标）、background-image（渐变/纹理需反向调整）。
-
<input>和<textarea>默认在深色下边框极细，建议统一设border: 1px solid var(--border-color) -
<pre>和<code>建议加background-color: var(--code-bg); color: var(--code-text)，别依赖浏览器默认 - SVG 图标若用
fill="currentColor"，则随color变；若填死#000，就得在[data-theme="dark"]下用filter: brightness(0.85)压暗
data-theme 属性怎么影响排版布局
单纯改颜色不影响盒模型，但深色模式常伴随更宽松的行高、更大的字重、更谨慎的阴影使用——这些都得靠 CSS 选择器驱动。挂 data-theme="dark" 在 <html> 上，才能让 html[data-theme="dark"] p、html[data-theme="dark"] ul 这类规则生效，否则 body.dark-theme p 对伪元素、滚动条、第三方组件无效。
排版相关变量建议单独抽离：--line-height-base、--font-weight-emphasis、--spacing-unit，并在两套主题里给不同值。例如：
立即学习“前端免费学习笔记（深入）”；
html[data-theme="light"] {
--line-height-base: 1.6;
--font-weight-emphasis: 600;
}
html[data-theme="dark"] {
--line-height-base: 1.65;
--font-weight-emphasis: 500;
}
然后所有 p、h2、li 都用 line-height: var(--line-height-base)，避免手动重复写。
图片和字体在深色模式下怎么不“打架”
纯白背景图在深色下会过曝，纯黑 SVG 在浅色下会吸光——这不是 bug，是设计前提没对齐。解决方案不是“换图”，而是分层控制：
- 用
picture+source media="(prefers-color-scheme: dark)"提供深色优化版图片，但注意：仅响应系统偏好，不响应 JS 切换 - 更稳妥的是用
html[data-theme="dark"] img加filter: contrast(0.9) brightness(1.05)微调，避免硬切源文件 - 字体渲染差异大：深色背景下
font-smooth: antialiased易发虚，建议统一用-webkit-font-smoothing: subpixel-antialiased（Safari）和text-rendering: optimizeLegibility - 中文字体尤其要注意：思源黑体在深色下默认灰度过高，可微调
color: hsl(0, 0%, 92%)而非直接#e6e6e6，保留 HSL 的亮度感知一致性
初始化闪屏和排版跳变怎么彻底避免
闪屏本质是 CSS 已加载、JS 还没执行完时，浏览器按默认主题渲染了一帧。解决它不靠“加 transition”，而靠阻断首次渲染逻辑：
必须把初始化脚本塞进 <head> 最顶部，且在任何 <link rel="stylesheet"> 之前运行。示例顺序不可错：
<script>
const saved = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = saved ?? (systemPrefersDark ? 'dark' : 'light');
</script>
<link rel="stylesheet" href="style.css">
漏掉这一步，哪怕后面加了 transition: background-color 0.2s，用户仍会看到 100ms 白底黑字 → 黑底白字的跳变。更隐蔽的问题是：若 CSS 里用了 @media (prefers-color-scheme: dark) { :root { ... } }，而 JS 又设了 data-theme="dark"，两套变量冲突，排版尺寸可能意外缩放——所以变量定义必须收口到 html[data-theme="..."] 下，别混用媒体查询和属性选择器。
