主题换肤逻辑复用的核心是封装为usetheme组合式函数，统一管理状态、应用、持久化与响应式同步，并通过css变量解耦样式，支持多主题及动态色值扩展，全局组件直接消费无需重复判断。
主题换肤的逻辑复用，核心是把“状态管理 + 主题应用 + 持久化 + 响应式同步”这些通用能力抽离成可独立维护、跨组件复用的组合式函数（Composable），而不是在每个页面或组件里重复写 localStorage 读写、class 切换、CSS 变量注入等代码。
用 useTheme 封装完整换肤逻辑
创建 composables/useTheme.ts，统一处理主题切换的全流程：
- 定义响应式主题状态（如
theme: ref） - 从 localStorage 或系统偏好中初始化值
- 提供
setTheme(theme: string)方法，自动更新 HTML 的data-theme属性和 CSS 变量 - 监听变化，同步写入 localStorage，并触发 document 重绘（可选加过渡类）
- 支持动态注入变量：比如传入自定义主色，实时更新
--primary-color
配合 CSS 变量实现样式解耦
所有 UI 组件（按钮、卡片、TabBar 等）只使用 CSS 变量，不写死颜色值：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 在
:root或[data-theme="light"]下定义整套变量：--bg-base、--text-primary、--border-radius等 - 深色模式下用
[data-theme="dark"]覆盖同一组变量，无需改组件代码 - 换肤时只需调用
useTheme().setTheme('dark')，样式自动生效
支持多主题 + 动态色值扩展
进阶场景下，主题不只是明暗二分，还可能有品牌色主题（如 blue / green / vermilion）：
- 在
useTheme中预设多套变量映射对象（如themes.blue是一个包含 20+ 个 CSS 变量的 Record） - 暴露
applyVariables(variables: Record<string string>)</string>方法，供外部传入运行时生成的颜色（例如用户选的 HSL 色相） - 结合 SCSS 函数（如
hsl($hue, 100%, 50%)）提前生成变量模板，再由 JS 注入实际值
与路由/布局组件协同复用
换肤逻辑不是孤立的，要能被 TabBar、Header、Sidebar 等全局组件直接消费：
- TabBar 组件通过
const { theme } = useTheme()获取当前主题，控制图标/文字颜色 - 不需要在每个组件里判断
theme.value === 'dark'，而是用 CSS 变量直接驱动样式：color: var(--text-secondary) - 若需主题敏感的交互行为（如夜间模式下禁用某动画），也统一走
theme响应式依赖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
