vue3实现换肤
Vue3 实现换肤功能
换肤功能通常通过动态切换 CSS 变量或类名来实现，以下是几种常见方法：
动态切换 CSS 变量
- 定义主题变量 在全局 CSS 文件中定义主题相关的 CSS 变量：
:root {
--primary-color: #409EFF;
--bg-color: #f5f7fa;
}
.dark-theme {
--primary-color: #304156;
--bg-color: #1f2d3d;
}- 使用 Composition API 管理主题 创建 useTheme 组合式函数：
import { ref, watchEffect } from 'vue'
export function useTheme() {
const theme = ref(localStorage.getItem('theme') || 'light')
watchEffect(() => {
document.documentElement.className = theme.value === 'dark' ? 'dark-theme' : ''
localStorage.setItem('theme', theme.value)
})
const toggleTheme = () => {
theme.value = theme.value === 'dark' ? 'light' : 'dark'
}
return { theme, toggleTheme }
}- 在组件中使用 在需要切换主题的组件中：
import { useTheme } from './useTheme'
const { theme, toggleTheme } = useTheme()使用 CSS 预处理器
- Sass/Less 变量切换 通过动态修改 HTML 的 class 或 data 属性：
<html :data-theme="currentTheme">对应的 Sass 文件：
[data-theme="light"] {
$primary: #409EFF;
@import './light-theme';
}
[data-theme="dark"] {
$primary: #304156;
@import './dark-theme';
}第三方库方案
- 使用 vue-use vue-use 库提供了 useDark 和 useToggle 组合式函数：
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)- Element Plus 主题切换 如果使用 Element Plus，可以利用其提供的主题工具：
import { useTheme } from 'element-plus'
const { theme, switchTheme } = useTheme()实现持久化
- 本地存储 在切换主题时将选择保存到 localStorage：
localStorage.setItem('theme', theme.value)- 服务器保存 通过 API 将用户主题偏好保存到服务器：
api.saveUserPreference({ theme: currentTheme.value })性能优化
-
提取公共样式 将不变的样式与主题样式分离，减少重绘。
-
按需加载主题 使用动态 import 按需加载主题样式文件：
const loadTheme = async (themeName) => {
await import(`@/styles/themes/${themeName}.css`)
}这些方法可以根据项目需求组合使用，实现灵活的主题切换功能。
