移动端h5暗黑主题应使用@media(prefers-color-scheme:dark)在:root中定义css变量，并添加声明，配合body背景回退、避免scoped样式干扰及!important覆盖，确保ios safari与微信webview兼容。
在 H5 页面中实现移动端暗黑主题的色彩变量替换，核心是结合 CSS 媒体查询（@media (prefers-color-scheme: dark)）与 CSS 自定义属性（CSS Variables），并确保在移动设备上可靠生效。关键点在于：媒体查询需写在根级作用域、变量需定义在 :root 中、避免被内联样式或高优先级选择器覆盖，且需考虑 iOS Safari 等移动端浏览器的兼容性（iOS 13+ 支持良好）。
基础写法：用 prefers-color-scheme 定义两套变量
直接在 :root 中通过媒体查询切换 CSS 变量值，是最简洁、推荐的方式：
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
--border-color: #333333;
}
}
然后在组件中使用这些变量：
<div class="card">内容</div>
.card {
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
}
适配移动端特殊场景（如 Safari 强制白底、微信内置浏览器）
部分移动端环境（如微信 WebView、旧版 iOS Safari）可能不触发 prefers-color-scheme，或强制重置背景为白色。可配合以下策略增强兼容性：
- 在
中添加<meta name="color-scheme" content="light dark">，显式声明支持双主题，帮助 WebView 正确渲染表单控件和滚动条 - 对关键容器（如
body或根div#app）同时设置背景色和变量，防止变量未生效时出现闪白或透明背景：body { background-color: var(--bg-color, #ffffff); } - 微信 Android 8.0.32+ 已支持
prefers-color-scheme，但 iOS 微信仍依赖系统设置（需开启「深色模式」且微信版本 ≥ 8.0.30）；若需强控制，可加 JS 检测 + 手动 class 切换作为 fallback
JS 动态响应系统主题变化（可选增强）
当用户在 App 内切换系统深色模式时，页面需实时响应。监听 change 事件即可：
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function updateTheme(e) {
document.documentElement.classList.toggle('dark', e.matches);
}
mediaQuery.addEventListener('change', updateTheme);
updateTheme(mediaQuery); // 初始化
配合 CSS：
:root:not(.dark) { --bg-color: #fff; }
:root.dark { --bg-color: #121212; }
这种方式便于后续扩展（如用户手动切换主题），也规避了某些 WebView 对媒体查询的延迟响应问题。
避坑提醒：移动端常见失效原因
以下情况会导致暗黑主题不生效，需逐一排查：
-
CSS 变量被 !important 覆盖：检查是否有其他样式用
!important写死颜色，它会无视var() -
媒体查询嵌套在组件 scoped style 中（Vue）：Scoped CSS 会添加属性选择器，导致
@media内的:root无法命中；应将主题变量写在全局样式或<style></style>非 scoped 块中 -
未设置 viewport：缺少
<meta name="viewport" content="width=device-width,initial-scale=1.0">可能导致 Safari 降级渲染，影响媒体查询识别 -
字体抗锯齿差异造成“灰蒙感”错觉：暗色模式下文字默认渲染更锐利，若觉得对比度低，可微调
font-smooth或-webkit-font-smoothing（仅限 WebKit）
不复杂但容易忽略。只要变量定义位置正确、meta 声明到位、避开 scoped 陷阱，移动端暗黑主题就能稳定运行。
