ref 是 Vue 3 SFC 中实现全局主题标志位的最轻量方案，通过 ref 声明 isDark、props 透传或 provide/inject 注入，并结合 CSS 变量动态绑定 class 实现响应式主题切换。

在 Vue 3 单文件组件（SFC）内实现“全局主题标志位”，本质是让一个响应式状态（如 isDark）能被当前组件及其所有子组件一致读取和响应，同时避免污染真正的全局状态（如 window 或 app.config.globalProperties）。ref 是最轻量、最自然的选择，关键在于它的作用域控制和响应式穿透能力。

用 ref 声明主题标志位（基础定义）

在父组件的 <script setup></script> 中直接定义一个 ref 变量即可：

• const isDark = ref(false) —— 创建初始为浅色的主题标志位
• 它自动具备响应式：修改 isDark.value = true 会触发所有依赖它的模板或计算属性更新
• 无需额外 import，开箱即用

向下透传给子组件（props + ref 解构）

Vue 的单向数据流要求主题状态通过 props 显式传递。推荐结合 defineProps 和解构语法保持简洁：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 父组件模板中：
• 子组件 Header.vue 中声明：const props = defineProps({ isDark: { type: Boolean, required: true } })
• 这样子组件就能直接用 props.isDark 绑定 class 或样式，且随父级 ref 变化实时响应

跨多层子组件时的简化方案（provide/inject）

如果组件嵌套较深（如 Layout → Sidebar → MenuItem），逐层传 props 显得冗余。此时用 provide 注入 ref 更干净：

• 父组件中：provide('theme', isDark)
• 任意深层子组件中：const isDark = inject('theme')
• 注意：inject 返回的是原始 ref 对象，所以仍需 isDark.value 读取，且修改它会同步影响所有消费者

配合 CSS 变量实现主题切换（实用闭环）

仅改 JS 标志位还不够，要真正切换视觉效果。推荐用 CSS 自定义属性配合 ref：

• 在根元素（如 或组件根
  ）上动态绑定 class：:class="{ 'dark': isDark.value }"
• 在 CSS 中定义两套变量：
:root { --bg-color: #fff; --text-color: #333; }
.dark { --bg-color: #1e1e1e; --text-color: #eee; }
• 所有样式使用 var(--bg-color)，主题切换即生效