CSS变量天然不支持跨应用同步，因其作用域严格限定于单个HTML文档的document对象，不同域名、页面或iframe间无法共享:root变量或直接读写对方document.documentElement.style。
做不到跨应用主题同步，CSS变量作用域仅限单个 HTML 文档，不同应用（不同域名、不同页面、不同 iframe）之间无法共享 :root 变量或直接读写对方的 document.documentElement.style。
为什么 CSS 变量天然不支持跨应用同步
CSS 变量是文档级作用域机制，依赖 DOM 树和样式计算上下文。两个独立应用哪怕用同一套变量名，只要没共用同一个 document，就完全隔离：
-
:root是每个 HTML 文档的<html>元素，跨页面即跨document，变量不传递 - iframe 默认开启同源策略限制，即使同域，父页也无法直接操作子 iframe 的
document.documentElement.style - 不同域名（如
app1.example.com和app2.example.com）之间 localStorage、cookie、document 都被浏览器严格隔离
能做的替代方案：靠外部状态桥接
所谓“同步”，本质是让多个应用各自读取同一份外部状态，并独立应用到自己的 :root 上。可行路径只有三条：
- 统一使用
localStorage+ 同域名前缀：所有应用部署在相同二级域名下（如ui.example.com/app1、ui.example.com/app2），共享localStorage；切换主题时写入localStorage.setItem('theme', 'dark')，各应用加载时读取并设置document.documentElement.setAttribute('data-theme', ...) - 通过 postMessage 跨 iframe 通信：若应用以 iframe 嵌入方式共存于同一父页，父页可监听主题变更事件，再用
iframe.contentWindow.postMessage()推送新主题配置，子应用收到后调用document.documentElement.style.setProperty() - 服务端下发主题标识：登录态统一，后端在 HTML 模板中注入初始
data-theme属性（如<html data-theme="dark">），避免客户端 JS 读取 localStorage 的竞态问题；但无法做到实时同步，需配合刷新或长连接推送
容易踩的坑：误以为改了变量就“自动同步”
很多开发者试图用以下方式“强制同步”，结果全部失效：
立即学习“前端免费学习笔记（深入）”；
- 在 A 应用里执行
document.documentElement.style.setProperty('--theme-color', '#222')—— 这只影响当前 document，B 应用完全无感知 - 把变量定义写进 CDN 上的公共
variables.css，然后所有应用都<link rel="stylesheet">—— 文件内容一致 ≠ 变量值一致；每个应用仍需自己调用setProperty或切换data-theme才会生效 - 用 BroadcastChannel API 发送消息，但在 Safari 中默认禁用，且跨 tab 不跨应用（不同 origin 的 tab 无法通信）
真正要落地跨应用主题，必须放弃“CSS 变量自动传播”的幻想，老老实实把主题当成业务状态来管理：定义清楚谁负责写、谁负责读、如何兜底、怎么降级。最常被忽略的是同源前提——没有统一域名或 iframe 嵌套关系，连最基本的通信通道都建不起来。
