如何实现基于CSS变量的暗黑模式适配方案？-css教程-PHP中文网

只写@media (prefers-color-scheme: dark)会闪屏或失效，因cssom解析时系统偏好未就绪，页面先按亮色渲染再重绘；旧版safari、微信webview等不支持该特性；变量需在:root初始化并完整覆盖，所有var()必须加fallback，且须声明color-scheme启用原生控件适配。

如何实现基于css变量的暗黑模式适配方案？

为什么只写 `@media (prefers-color-scheme: dark)` 会闪屏或失效

浏览器解析 CSSOM 时，@media (prefers-color-scheme: dark) 的值还没确定，页面先按默认（通常是亮色）渲染一次，等媒体查询生效后再重绘。iOS Safari 和部分 Android WebView 尤其明显。这不是 CSS 写错了，是执行时机问题。

旧版 Safari（12.0）、微信内置浏览器、某些 Electron 内核根本不识别该媒体特性；用户可能系统设浅色但偏爱网页深色；或系统没配偏好（no-preference），此时媒体查询不触发。

必须在 :root 中初始化变量，并在媒体查询内完整覆盖——变量本身不响应变化，--bg: #fff 不会在暗色环境下自动变成 #121212
所有使用处必须加 fallback：background: var(--bg, #ffffff)，否则变量未定义时样式崩塌
别把变量定义在组件选择器里（如 .card { --bg: #fff; }），否则媒体查询无法覆盖

`:root` 变量声明顺序和 fallback 怎么写才不翻车

先定义浅色默认值，再用媒体查询覆盖暗色值。顺序不能错：浅色必须在前，否则深色变量会污染浅色模式。

示例中 --color-bg-primary 和 --color-text-primary 是语义化命名，比 --dark-blue-500 更易维护；避免在变量里写透明度（如 rgba(0,0,0,0.8)），改用 hsl() 或独立的 --opacity 控制，否则暗色下叠加容易发灰。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

:root { --color-bg-primary: #ffffff; --color-text-primary: #1a1a1a; }
@media (prefers-color-scheme: dark) { :root { --color-bg-primary: #121212; --color-text-primary: #e0e0e0; } }
所有组件样式必须基于 var(--xxx)，而不是直接写死颜色值，否则 JS 切换主题无效

手动切换主题时，`html.dark` 和 `data-theme` 怎么配合 `@media`

系统级自动适配靠 @media (prefers-color-scheme: dark)，用户手动切换必须用 html.dark 类或 data-theme="dark"。两者不是二选一，而是共存关系——否则用户点了「深色模式开关」却没反应。

常见错误：只用媒体查询，但没在 CSS 里写 html.dark :root 覆盖变量，导致变量还是亮色的；或者对 :root 直接写 !important，后续 JS 更新变量会失效。

推荐用 html[data-theme="dark"] :root 替代 html.dark :root，语义更清晰且避免与第三方库 class 冲突
第三方组件库（如 Ant Design / MUI）通常靠 JS 注入 class 或修改 :root 变量来切主题，和你的媒体查询规则直接冲突，需统一入口，例如用 [data-theme="dark"] .ant-btn 这类更具体的选择器覆盖关键样式
必要时在外层加 wrapper，并用 [data-theme="dark"] > .wrapper 提升优先级

`color-scheme: light dark` 是做什么的，能不能省略

它只告诉浏览器“我支持双模式”，从而让原生控件（<input>、<select></select>、滚动条、canvas 边框）自动适配系统色。不加的话，这些元素在暗色系统下仍显示亮色边框或白底。

注意：它不控制你写的任何内容样式，只影响 UA 控件。所以必须和 @media (prefers-color-scheme: dark) 配合使用，且要加在 html 或 body 上。

html { color-scheme: light dark; } 是最低成本的滚动条/表单控件适配方式
旧页面兼容性差（Safari 12–14、Chrome 75 以下）时，color-scheme + <meta name="color-scheme" content="light dark"> 是必要兜底
<progress></progress> 轨道、::-webkit-scrollbar 等 UA 控件必须单独写，color-scheme 不覆盖它们

复杂点在于：变量覆盖路径有三套（系统偏好、用户手动、无偏好 fallback），每套都要独立验证是否生效；最容易被忽略的是图片、SVG 和第三方 iframe 内容的适配——它们不会继承父页面变量，得靠 picture + srcset 或 filter: invert(1) hue-rotate(180deg) 单独处理。