@media (prefers-color-scheme: dark) 需配合 :root 变量重定义、color-scheme 声明及交互态/控件/非文本元素的变量化适配，否则深色模式将失效或违和。
直接用 @media (prefers-color-scheme: dark) 就能响应系统偏好，但只写媒体查询远远不够——变量没组织好、交互态颜色写死、原生控件不协调，都会让深色模式“看起来像开了但又没完全开”。
为什么 @media (prefers-color-scheme: dark) 写了却没生效
常见现象是：CSS 文件里写了媒体查询，切换系统深色模式后背景/文字颜色毫无反应。
- 检查是否漏了默认样式——
:root必须先定义浅色变量，否则深色块里的var(--bg)会 fallback 到unset或浏览器默认值 - 确认变量重定义位置：必须在
@media块内对:root重新赋值，不能只写.dark-theme { --bg: #1a1a1a; }却忘了加 class - 注意作用域链：如果页面根元素是
，而你只在[data-theme="dark"]下设变量，那@media触发时并不会自动加这个属性——两者逻辑独立 - 旧版 Safari（≤13.1）和部分安卓 WebView 不支持该特性，会静默忽略整个媒体查询块，属于安全降级，不是 bug
如何组织 CSS 变量才能真正“一改全变”
核心原则：所有颜色都走 var()，且变量只在 :root 和 @media 块里定义，不分散、不重复、不覆盖。
- 浅色默认值写在顶层
:root，例如：--bg: #fff; --text: #333; --border: #e0e0e0; - 深色值只在
@media (prefers-color-scheme: dark) { :root { ... } }中重设，不要写--bg: #1a1a1a; --bg: #2d2d2d;这种重复声明 - 避免“伪变量”陷阱：不要用
--primary-light: #3498db; --primary-dark: #2980b9;然后在组件里手动判断，而是统一用--primary-color，靠媒体查询控制它的值 - 未变化的变量（比如
--accent-color深浅一致）就别放进媒体查询里，减少冗余和维护负担
按钮 hover、focus 等交互态为什么在深色下“没感觉”
这不是伪类失效，是颜色对比崩了。深色背景下，background: #f0f0f0 和 #1a1a1a 差距太小，人眼几乎分辨不出明暗变化。
- 所有交互态颜色（
:hover、:active、:focus）必须用变量，例如background: var(--bg-hover); - 深色模式下，
--bg-hover应比主背景略亮（如#2d2d2d对应#1a1a1a），而不是更暗或透明度叠加 - 慎用
opacity做 hover 效果：深色背景上叠加半透明白色，容易发灰、糊成一片；优先用明度偏移（+10–20 LCH lightness） - 原生控件（
<input>、<button></button>）要配合color-scheme: light dark，否则即使你写了background，边框和文字仍可能保持系统浅色
怎么让图片、阴影、边框也适配深色模式
这些非文本元素容易被忽略，但恰恰是深色模式违和感的主要来源。
- 图片默认在深色背景下会过曝，Simple.css 的做法是统一加
img, video { opacity: 0.8; }，简单有效 - 阴影（
box-shadow）别硬写rgba(0,0,0,0.1)：深色模式下它会在黑底上“消失”，改用变量如box-shadow: 0 2px 4px var(--shadow-color);，并在媒体查询中设--shadow-color: rgba(0,0,0,0.3); - 边框同理，避免
border: 1px solid #ccc，改用border: 1px solid var(--border);，并确保--border在深色下是#444而非#ccc - 如果用了
filter: drop-shadow()，注意它不受color-scheme影响，需手动用变量控制参数
真正难的不是写对一个媒体查询，而是让整套变量体系在浅色/深色/用户手动覆盖/系统变更监听/可访问性上下文（如 forced-colors）之间保持一致性。最容易被跳过的，是把 color-scheme: light dark 加到 :root 上——它不改变你的 CSS，但能让浏览器自动调校滚动条、表单、焦点环等原生元素，这是纯 CSS 方案里最省力的“隐形适配”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
