微信小程序中:root非真正全局，因样式隔离机制导致变量作用域错乱；应改用[data-theme]+组件根选择器双作用域管理Token，避免多端污染与白标失效。
直接在 :root 里定义所有 Token，会导致微信小程序、H5、uni-app 多端主题互相污染——改一个颜色，三端全变，根本做不到租户白标或深色模式局部切换。
为什么小程序里 :root 不是“全局”而是“伪全局”
微信小程序的样式隔离机制（styleIsolation: "isolated"）会让组件内部的 :root 实际作用于组件树而非整个页面。但如果你在 app.wxss 里写 :root，它又会被所有页面继承——这种不一致导致变量行为在不同层级错乱。
- app.wxss 中的
:root变量会透传到所有页面，但无法被自定义组件内联样式覆盖（因为组件 wxss 的层叠优先级更高） - 自定义组件自己声明
:root，只影响该组件及其子组件，但和外部 Token 无法联动 - uni-app 或 Taro 编译后可能把
:root提升为 document.documentElement，和小程序原生逻辑冲突
正确做法：用 [data-theme] + 组件根选择器双作用域
放弃依赖单一 :root，转而让每个可换肤的容器（如 .page-wrapper、view[data-role="card"]）自己承载变量，并通过属性选择器注入值。
- 在页面最外层节点加
data-theme="light"或data-theme="dark" - 所有基础 Token 定义在
[data-theme="light"]和[data-theme="dark"]下，不写进:root - 组件根元素（如
.t-button）只读var(--color-primary-500)，不声明新变量 - 需要局部覆盖时，用
.t-button[data-variant="ghost"] { --color-bg: transparent; }，避免污染整套 Token
小程序里怎么安全传入运行时主题配置
不能靠 JS 改 document.documentElement.style.setProperty()，小程序没有 document.documentElement；也不能用 setData 更新 class 名再靠 CSS 切换——太慢且无法响应式回退。
立即学习“前端免费学习笔记（深入）”；
- 用
Component.setData({ themeVars: { '--color-bg': '#fff' } })配合 WXML 中style="{{themeVars}}"内联注入 - 更推荐：在页面
onLoad时调用wx.setStorageSync('theme', 'dark')，然后在 app.js 的globalData中统一读取并挂载到顶层view的data-theme属性上 - 务必在
App.onLaunch就初始化，否则首屏闪动（尤其从分享卡片进入时） - 注意：TDesign 小程序版的
td-config-provider默认只支持主题色，不接管所有 Token，得手动 patch 其themeprop 解析逻辑
跨平台 Token 管理最难的不是定义变量，而是控制变量“在哪生效、被谁读取、何时更新”。一旦把变量绑死在 :root，就等于放弃了组件级隔离和租户白标能力——后面所有动态换肤、灰度发布、A/B 测试都会卡在这一步。
