JSBridge传主题参数时，CSS需通过document.documentElement.style.setProperty写入CSS变量或class切换来动态响应，须标准化参数、避免缓存失效，并为不支持CSS变量的旧WebView降级处理。
JSBridge 传主题参数时，CSS 怎么动态响应
原生端通过 JSBridge 向 Web 端同步主题色、圆角尺寸、字体缩放等参数时，CSS 本身不会自动重算——必须把 JS 拿到的值转成 CSS 可感知的状态。最直接有效的方式是写入 document.documentElement 的 style 属性，或更新 :root 自定义属性。
常见错误是只存 JS 变量（如 window.theme = { primary: '#007AFF' }），却不触发样式重绘；或者用 document.write 插入新 <style> 标签，导致重复注入、优先级混乱、无法被 CSSOM 正确覆盖。
- 推荐做法：JSBridge 回调中调用
document.documentElement.style.setProperty('--primary-color', value) - 确保所有主题相关 CSS 都基于
var(--primary-color)定义，而非硬编码色值 - 若需兼容 iOS 13 以下或 Android WebView 旧内核，可额外写一层 class 切换（如
document.body.className = 'theme-dark'），再用.theme-dark .btn { background: #333; }
原生传参格式不一致导致 CSS 变量失效
Android WebView 常传字符串 "#FF6B6B"，iOS 可能传对象 { primary: "#FF6B6B", radius: "8px" }，甚至带单位的数字 "14" 而非 "14px"。这些差异会直接让 setProperty 写入无效值，CSS 解析失败后回退到初始值。
务必在 JSBridge 回调里做标准化处理：
立即学习“前端免费学习笔记（深入）”；
- 颜色值统一校验是否以
#开头，否则丢弃或 fallback - 尺寸类参数（
radius,spacing）检查是否含单位，不含则自动补px（如value + 'px'） - 布尔类主题开关（如
isDarkMode）建议统一转为data-theme="dark"属性，避免 CSS 中用var(--is-dark-mode, false)这种不可靠判断
WebView 缓存导致主题切换延迟或不生效
H5 页面加载后，CSS 文件可能被强缓存，而 JSBridge 主题参数是在页面加载完成后才到达。这时即使 JS 更新了 :root 变量，部分样式（尤其是 import 的 CSS 文件或外部 CDN 样式）可能已解析完毕，不再响应后续变量变更。
关键点在于：CSS 自定义属性是实时响应的，但前提是选择器已存在且未被更高优先级规则覆盖。
- 确保所有主题样式都写在内联
<style>或主 CSS 文件中，避免放在异步加载的 CSS chunk 里 - 不要依赖
@import引入主题样式——它阻塞渲染且无法动态 reload - 如果使用 CSS-in-JS 库（如 styled-components），需确认其 SSR/客户端 hydration 是否保留了 :root 变量上下文；否则服务端渲染出的静态 HTML 会丢失 JS 注入的主题态
Android WebView 69 以下不支持 CSS 变量？其实可以降级
部分低端 Android 设备（如 WebView 53–68）确实不支持 var()，但不是完全没法做主题。真正不可用的是 css custom properties，而不是整个动态主题链路。
降级策略要轻量、无侵入：
- 用
Modernizr.cssprops或简单检测getComputedStyle(document.documentElement).getPropertyValue('--test')判断支持度 - 不支持时，改用 JS 遍历 DOM，对关键节点批量设置
style.backgroundColor等内联样式（仅限按钮、标题等少量高频元素） - 避免在降级路径里操作
document.styleSheets—— Android WebView 对该 API 支持极差，易抛SecurityError
真正难处理的不是 CSS 变量兼容性，而是原生侧传参时机不可控：比如用户切主题时 App 处于后台，JSBridge 消息延迟送达，或 WebView 已销毁。这类边界情况得靠原生层加消息队列+状态快照，纯前端没法兜底。
