暗黑模式不闪屏、不白屏的关键在于CSS变量定义顺序与兜底：必须在:root中先定义亮色默认值（如--bg: #ffffff），再用@media (prefers-color-scheme: dark)仅覆盖变量；所有颜色样式须引用var(--bg)，禁用硬编码；data-theme="dark"须挂载于<html>而非<body>以确保全局生效；同时需同步localStorage并手动处理表单、SVG、阴影等边缘元素，OLED屏避免纯黑。
直接用 @media (prefers-color-scheme: dark) + CSS 自定义变量是最稳、最轻、首次渲染即生效的方案；JS 切换只是补充，不是默认逻辑的起点。
怎么写才能让暗黑模式不闪屏、不白屏
关键在「顺序」和「兜底」：CSS 变量必须先在 :root 定义亮色默认值，再用媒体查询覆盖暗色值。如果反过来——只在 @media 里定义变量，系统不匹配时变量就未定义，var(--bg) 会退化成 initial，导致背景透明、文字消失。
-
:root中写默认（亮色）变量，例如--bg: #ffffff、--text: #333333 -
@media (prefers-color-scheme: dark)内仅覆盖变量，不重写整套样式规则 - 所有颜色相关样式都用
var(--bg)引用，别硬编码#121212在多个地方 - 避免在组件级
.card { --bg: ... }里重复定义主题变量，媒体查询无法穿透作用域
为什么 data-theme="dark" 要挂到 <html> 上而不是 <body>
因为 <body> 的样式继承自 <html>，而很多全局变量（比如 color、background）默认作用在 html 或根元素上。挂错位置会导致部分区域（如 <pre>、<textarea>、滚动条）没被覆盖。
- 把
data-theme="dark"设在document.documentElement（即<html>），确保选择器[data-theme="dark"]能精准命中根级上下文 - 对应 CSS 必须用
[data-theme="dark"] .button这类具体选择器，别只写.dark .button——容易和第三方库 class 冲突 - 切换时必须同步
localStorage.setItem('theme', 'dark')，否则刷新后回到系统偏好，用户选择丢失
表单、SVG、阴影这些“边缘元素”怎么统一处理
@media (prefers-color-scheme: dark) 不会自动翻转 <input> 轨道、<select> 下拉箭头、<svg> 填充色或 box-shadow 深度——它们得手动声明。
立即学习“前端免费学习笔记（深入）”；
-
<input type="range">的::-webkit-slider-thumb和::-webkit-slider-runnable-track需单独设background -
<svg>推荐用fill="currentColor"，然后靠父元素color控制，比写死fill="#000"更可控 -
box-shadow: 0 2px 4px rgba(0,0,0,0.2)在暗色下太重，换成rgba(0,0,0,0.1)或rgba(255,255,255,0.05) - 加
<meta name="color-scheme" content="light dark">到<head>，让浏览器优化原生控件（如复选框、焦点环）配色
旧版 Safari 和 WebView 里暗黑模式失效怎么办
Safari 13.1–14.0 对嵌套 @media 或预处理器输出有解析 bug；微信/QQ 内置安卓 WebView 大多根本不支持 prefers-color-scheme。不能只靠它赌兼容性。
- 降级策略：页面加载时先读
localStorage.getItem('theme')，有值就立刻设data-theme；没值再 fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches - 别用
@layer包裹暗色规则——Safari 14 会直接忽略 - 对完全不支持的环境（如旧 WebView），可加一层 JS 检测：
if (!window.matchMedia)就强制走 localStorage 或 UA 判断 - OLED 屏幕慎用纯黑：
#000000改成#121212或#1e1e1e，减少烧屏风险
真正难的不是写两套颜色，而是让用户的选择优先级始终高于系统设置，同时不让 JS 切换破坏 CSS 层叠逻辑——这需要从变量定义顺序、选择器粒度、存储时机三个点一起卡死。
