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