底部悬浮条深色模式适配需用css变量+data-theme属性联动，html[data-theme="dark/light"]定义变量，所有颜色、背景、图标fill均绑定变量，透明度与毛玻璃参数须按主题单独调优，高亮态、过渡动画、svg图标、键盘弹出补偿均需主题感知。
底部悬浮条的深色模式适配必须靠 CSS 变量 + data-theme 属性联动
纯靠 @media (prefers-color-scheme: dark) 不够——它只能响应系统设置，无法保存用户手动切换结果，一刷新就回退。真正可用的方案是：用 document.documentElement.dataset.theme 控制根节点状态，再通过 CSS 层叠选择器驱动样式变更。
关键点在于：所有颜色相关声明（背景、文字、边框、图标 fill）都必须基于 CSS 变量，且变量值在 html[data-theme="dark"] 和 html[data-theme="light"] 下分别定义。漏掉 html 前缀会导致选择器不匹配，样式完全不生效。
- 错误写法：
:root { --bar-bg: #fff; } [data-theme="dark"] { --bar-bg: #1a1a1a; }→ 后者无作用范围，变量未重定义 - 正确写法：
html[data-theme="light"] { --bar-bg: #fff; --bar-text: #333; } html[data-theme="dark"] { --bar-bg: #1a1a1a; --bar-text: #eee; } - 悬浮条元素直接用
background-color: var(--bar-bg); color: var(--bar-text);
透明背景与毛玻璃效果在深色模式下要单独调参
backdrop-filter: blur(10px) 在深色背景下虚化强度感知更弱，容易显得“发灰”或“糊”，不是简单复用浅色模式参数就能行的。同时，rgba() 的 alpha 值在深色底上对透出内容的可见度影响更大，需实测调整。
- 浅色模式常用
background-color: rgba(255, 255, 255, 0.85)；深色模式建议改用background-color: rgba(26, 26, 26, 0.75)—— 降低 alpha 避免过重，同时微调 RGB 基色防止偏紫/偏棕 -
backdrop-filter在深色主题中建议从blur(8px)起步测试，Safari 16.4+ 和 Chrome 最新版表现较一致，但 Android WebView 多数仍不支持，得加降级背景色 - 别忘了给
body设深色背景图或渐变，否则backdrop-filter在纯黑底上无效（背后没内容可模糊）
高亮按钮状态必须随主题同步更新，不能只改颜色
点击切换高亮时，如果只写了 .highlight { background-color: #007aff; }，那在深色模式下这个蓝色会和背景对比度过低，甚至不可见。高亮态必须是“主题感知”的，即它本身也要依赖 CSS 变量。
- 定义：
html[data-theme="light"] { --highlight-bg: #007aff; --highlight-text: #fff; } html[data-theme="dark"] { --highlight-bg: #0a84ff; --highlight-text: #fff; } - 按钮高亮类写成：
.bottom-bar-btn.highlight { background-color: var(--highlight-bg); color: var(--highlight-text); } - 过渡动画要包含所有变化属性：
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s，否则深色模式下可能突变 - 图标若用 inline SVG，记得把
fill也绑定到变量：svg { fill: var(--highlight-text); }
移动端键盘弹出时，深色模式下的 bottom 补偿逻辑不能失效
iOS 键盘弹出会触发 visualViewport.resize，导致视口高度骤减，此时若仅靠 env(safe-area-inset-bottom) 计算 padding，可能漏掉键盘高度，造成底部栏上浮、遮挡输入框。而深色模式本身不影响该问题，但会让视觉错位更刺眼。
- 监听
visualViewport比监听window.resize更精准：visualViewport.addEventListener('resize', () => { const bottom = window.visualViewport.height - document.documentElement.clientHeight; body.style.paddingBottom = <code>calc(56px + ${bottom}px); }); - 注意：该逻辑必须在
data-theme设置之后运行，否则深色模式下计算出的 padding 可能被后续样式覆盖 - 微信内置浏览器不支持
visualViewport，需 fallback 到window.innerHeight差值检测，但精度较低
实际最易被忽略的是：深色模式切换后，safe-area-inset-bottom 的值不会自动重读，它只在页面加载或横竖屏切换时更新。如果你在深色模式下动态插入底部栏（比如懒加载），必须手动触发一次 getComputedStyle(document.body).paddingBottom 强制重排，否则 padding 补偿会卡在旧值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
