推荐用 provide/inject + ref 实现主题换肤：父组件 provide 响应式 theme 和 toggleTheme，子组件 inject 后通过 .value 读写并自动响应，结合 localStorage 持久化与 CSS 变量动态更新样式。
Vue 中实现主题换肤的全局事件通知，不推荐用自定义事件（$emit）做跨组件通信，尤其不是父子关系时。自定义事件本质是组件实例间的局部通信机制，无法天然“全局”。真正适合主题换肤的方案是：用 provide / inject + 响应式状态管理（如 ref / reactive），或搭配 事件总线（已过时）、Pinia、localStorage + watchEffect 等方式实现全局响应与同步。
用 provide / inject 实现轻量级主题透传
适用于中小型项目，避免引入状态库。父组件（如 App.vue）提供主题状态和切换方法，子孙组件通过 inject 获取并响应变化：
- 在 App.vue 的
setup()中定义主题 ref 和切换函数，并通过provide暴露 - 任意后代组件调用
inject获取theme（响应式）和setTheme，直接绑定 class 或动态 style - 配合
watch或模板中:class绑定，自动更新样式（如:class="{ 'dark': theme.value === 'dark' }"） - 主题值建议存入
localStorage，页面刷新后仍保持，首次加载时从 localStorage 读取初始化
用 Pinia 管理主题状态（推荐）
更健壮、可调试、支持 SSR 和 TypeScript。新建一个 theme store：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 定义
theme: ref('light')和toggleTheme()方法，内部同步更新 localStorage - 所有需要响应主题的组件用
useThemeStore()获取 store，直接读写store.theme - 结合
computed或class绑定，例如：<div :class="themeStore.isDark ? 'dark-theme' : 'light-theme'> - 可在根组件
watch主题变化，动态添加document.documentElement.classList，统一控制 CSS 变量
用 localStorage + 全局监听实现“伪事件”通知
不依赖框架通信机制，纯浏览器能力，适合极简集成：
立即学习“前端免费学习笔记（深入）”；
- 切换主题时，执行
localStorage.setItem('theme', 'dark') - 在
main.js或 App.vue 的onMounted中监听storage事件：window.addEventListener('storage', handler) - handler 中判断 key === 'theme'，然后触发
document.documentElement.setAttribute('data-theme', value) - CSS 使用
[data-theme="dark"] .btn { ... }进行样式隔离，无需 JS 操作 class
为什么不建议用自定义事件做全局通知
自定义事件（this.$emit 或 emit()）仅在当前组件实例及其直接子组件间有效；若强行用事件总线（如 Vue 2 的空 Vue 实例或 Vue 3 手动 createApp().config.globalProperties），会带来维护困难、类型丢失、内存泄漏风险，且违背 Composition API 设计理念。Pinia 或 provide/inject 更语义清晰、可测试、易追踪。
