自定义事件实现主题实时切换的核心是解耦切换动作与样式响应，通过派发"theme-change"事件并配合CSS变量更新类名，使各模块独立监听响应，同时支持系统偏好联动。
用自定义事件实现主题实时切换，核心是让“切换动作”与“样式响应”解耦——触发方只发事件，接收方各自更新，不互相依赖。这种方式特别适合组件化架构或跨模块协作的场景。
定义并分发主题切换事件
在触发切换的位置（比如主题按钮、系统偏好监听器），创建并派发一个携带主题信息的自定义事件：
- 使用 CustomEvent 构造函数，把主题名（如
"dark"或"light"）作为detail传入 - 推荐使用语义化事件名，例如
"theme-change"，避免与浏览器原生事件冲突 - 确保事件冒泡（
bubbles: true）或在全局对象（如window）上派发，方便多处监听
示例代码：
const event = new CustomEvent("theme-change", {detail: { theme: "dark" },
bubbles: true
});
document.documentElement.dispatchEvent(event);
在各模块中监听并响应事件
不同模块可独立订阅同一事件，按需执行自身逻辑：
- CSS 变量控制层：监听后更新
:root或特定容器的类名，触发预设样式生效 - 图表组件：读取
event.detail.theme，动态设置颜色配置项（如 ECharts 的color数组） - 第三方 UI 库（如 Nebular）：调用其主题服务（如
nbThemeService.changeTheme()）同步状态 - 持久化逻辑：在事件回调里写入
localStorage，保存用户选择
注意：监听应放在组件挂载或初始化阶段，避免重复绑定；若组件卸载，记得 removeEventListener。
配合 CSS 变量实现无刷新样式更新
自定义事件本身不改样式，真正起效靠 CSS 配合：
- 在
:root中定义默认变量（浅色主题） - 为每个主题单独写一个类（如
.theme-dark），内部用var(--xxx)覆盖同名变量 - 事件监听器只需给
document.documentElement切换这个类，所有var()引用自动重算
这样切换过程不操作 DOM 样式属性，也不重绘整个页面，性能轻量且过渡自然。
处理系统级主题变更联动
除了手动切换，还应响应系统偏好变化（如用户在系统设置里开启深色模式）：
- 用
window.matchMedia("(prefers-color-scheme: dark)")监听系统主题 - 当匹配状态改变时，主动派发相同的
"theme-change"事件 - 业务逻辑无需区分“谁触发的”，统一响应即可，保持逻辑一致性
这种设计让应用既能响应用户操作，也能尊重系统设置，体验更自然。
