当前位置：首页 > VUE

vue3实现换肤

2026-02-23 22:35:55VUE

Vue3 实现换肤功能

使用 CSS 变量动态切换主题

在 Vue3 中可以通过 CSS 变量结合 Vue 的响应式特性实现换肤功能。CSS 变量可以在运行时动态修改，适合主题切换场景。

定义全局 CSS 变量：

:root {
  --primary-color: #409EFF;
  --secondary-color: #67C23A;
  --background-color: #f5f7fa;
}

在组件中使用这些变量：

.container {
  background-color: var(--background-color);
  color: var(--primary-color);
}

通过 JavaScript 动态修改 CSS 变量：

// 在 Vue 组件中
function changeTheme(theme) {
  document.documentElement.style.setProperty('--primary-color', theme.primaryColor);
  document.documentElement.style.setProperty('--secondary-color', theme.secondaryColor);
}

使用 SCSS 变量预处理

对于更复杂的主题系统，可以使用 SCSS 变量预处理主题样式。

定义 SCSS 主题文件：

vue3实现换肤

// light-theme.scss
$primary-color: #409EFF;
$secondary-color: #67C23A;

// dark-theme.scss
$primary-color: #001529;
$secondary-color: #002140;

通过 Webpack 或 Vite 配置动态加载主题文件：

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/theme.scss";`
      }
    }
  }
})

使用 Vuex 或 Pinia 管理主题状态

对于全局主题状态管理，推荐使用 Pinia：

创建 theme store：

// stores/theme.js
import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    currentTheme: 'light',
    themes: {
      light: {
        primaryColor: '#409EFF',
        secondaryColor: '#67C23A'
      },
      dark: {
        primaryColor: '#001529',
        secondaryColor: '#002140'
      }
    }
  }),
  actions: {
    setTheme(themeName) {
      this.currentTheme = themeName
      this.applyTheme()
    },
    applyTheme() {
      const theme = this.themes[this.currentTheme]
      document.documentElement.style.setProperty('--primary-color', theme.primaryColor)
      document.documentElement.style.setProperty('--secondary-color', theme.secondaryColor)
    }
  }
})

在组件中使用：

vue3实现换肤

import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()
themeStore.setTheme('dark')

持久化主题选择

为了记住用户选择的主题，可以使用 localStorage：

在 theme store 中添加持久化逻辑：

// stores/theme.js
export const useThemeStore = defineStore('theme', {
  state: () => ({
    currentTheme: localStorage.getItem('theme') || 'light',
    // ...
  }),
  actions: {
    setTheme(themeName) {
      this.currentTheme = themeName
      localStorage.setItem('theme', themeName)
      this.applyTheme()
    },
    // ...
  }
})

响应式主题切换组件

创建一个主题切换组件：

<template>
  <div class="theme-switcher">
    <button @click="setTheme('light')">Light</button>
    <button @click="setTheme('dark')">Dark</button>
  </div>
</template>

<script setup>
import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()
const setTheme = (theme) => themeStore.setTheme(theme)
</script>

系统主题自动检测

可以检测用户系统主题偏好并自动应用：

// 在 theme store 中
const detectSystemTheme = () => {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    return 'dark'
  }
  return 'light'
}

// 初始化时检测
themeStore.setTheme(themeStore.currentTheme || detectSystemTheme())

// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  themeStore.setTheme(e.matches ? 'dark' : 'light')
})

以上方法可以根据项目需求组合使用，实现灵活的主题切换功能。CSS 变量方案适合简单主题切换，SCSS 方案适合复杂主题系统，状态管理方案则提供了更好的可维护性和扩展性。

标签: 换肤