暗黑模式需三者协同：prefers-color-scheme媒体查询兜底、data-theme属性统一控制、localStorage持久化用户选择；缺一则导致刷新回亮色、表单失色或Safari闪屏。
直接在 HTML 模板里实现可用的暗黑模式，核心不是“加个 dark class 就完事”，而是让 prefers-color-scheme 媒体查询打底、data-theme 属性接管控制权、localStorage 锁定用户选择——三者缺一不可。否则刷新就回亮色、切换后表单失色、Safari 下闪屏，全是常见翻车点。
怎么用 @media (prefers-color-scheme: dark) 设默认值
这是首次加载时最可靠的兜底逻辑：不依赖 JS，不等 DOM 就生效，且现代浏览器（Chrome 76+、Firefox 67+、Safari 12.1+）原生支持。
- 必须写在
<style>标签或外链 CSS 中，不能用内联属性 - 只响应系统设置，不响应运行时切换（比如 macOS 切完主题，页面需重绘才更新；但 Chrome 87+、Firefox 96+ 已支持动态重绘）
- 别写成
@media (prefers-color-scheme = dark)—— 等号是语法错误，必须用冒号 - 推荐只用
light和dark两个值，no-preference极少见，可忽略
示例（写在 <style> 里）：
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e6e6e6;
}
}
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--text: #333333;
}
}为什么必须用 data-theme 而不是 class="dark" 挂在 body 上
因为主题控制权要收口到 <html> 元素，才能避免样式优先级混乱、组件库覆盖、伪元素失效等问题。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
body.dark-theme对input::-webkit-inner-spin-button这类伪元素无效，而html[data-theme="dark"] input可以精准命中 - 第三方 UI 库（如 Tailwind、Bootstrap）常基于
html或:root做主题注入，挂 body 容易被绕过 - Safari 14–15 对嵌套媒体查询有 bug，但
[data-theme="dark"]选择器稳定可靠 - 服务端渲染（SSR）模板中，
<html data-theme="dark">可直出，避免客户端闪屏
初始化 JS 必须这样写（别漏掉 localStorage 同步）：
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// 页面加载时读取
const saved = localStorage.getItem('theme');
if (saved) {
setTheme(saved);
} else {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(isDark ? 'dark' : 'light');
}怎么让 color-scheme 和 light-dark() 不白写
这两个是锦上添花项，但错一步就完全失效：它们不替代媒体查询，只是补充原生控件和单属性快捷切换。
- 必须在
:root显式声明color-scheme: light dark，否则light-dark(black, white)永远返回第一个值 -
<meta name="color-scheme" content="light dark">要加在<head>里，否则 iOS Safari 地址栏、输入框聚焦色不会变 -
light-dark()参数不支持calc()或混用变量，写成light-dark(var(--text-light), var(--text-dark))才安全 - 它只管颜色类属性（
color、background-color），box-shadow、border、svg fill还得靠媒体查询或[data-theme]覆盖
错误示范（白写）：
:root {
color: light-dark(black, white); /* ❌ 没声明 color-scheme，永远 black */
}
/* ✅ 正确基础写法 */
:root {
color-scheme: light dark;
color: light-dark(var(--text-light), var(--text-dark));
}哪些地方最容易被忽略导致上线翻车
暗黑模式上线后出问题，90% 都卡在这些细节上，不是逻辑没写，是写了但没压住。
- 表单控件：
<input type="range">、<select>在 Safari 下需要[data-theme="dark"]+appearance: none+ 手动重绘，光靠color-scheme不够 - 滚动条：WebKit 内核必须单独写
::-webkit-scrollbar，prefers-color-scheme对它完全无效 - 图片与 SVG：
<img>不会自动反色，深色背景配浅色图标要手动换 src 或加filter: invert(1)（慎用，影响可访问性） - OLED 屏幕：别用纯黑
#000000，改用#121212或#1e1e1e，否则长期显示易烧屏 - 旧 WebView：QQ、微信内置浏览器很多不支持
prefers-color-scheme，fallback 必须靠localStorage+ 初始化 JS 检测
真正难的不是“怎么切”，而是“切完所有元素都一致”。一个 textarea 的 focus outline 没调，整个暗黑体验就塌一半。
