vue实现换肤

Vue 实现换肤的方法

使用 CSS 变量动态切换主题色

定义全局 CSS 变量，通过修改变量值实现换肤。在 assets/styles 目录下创建 theme.css 文件：

:root {
  --primary-color: #42b983;
  --secondary-color: #35495e;
}

在 main.js 中引入全局样式：

import '@/assets/styles/theme.css'

通过 Vue 动态修改 CSS 变量：

methods: {
  changeTheme(theme) {
    document.documentElement.style.setProperty('--primary-color', theme.primary)
    document.documentElement.style.setProperty('--secondary-color', theme.secondary)
  }
}

使用 SCSS 变量配合 webpack 动态编译

创建多套主题 SCSS 文件（如 theme-light.scss 和 theme-dark.scss），通过 webpack 的 sass-loader 动态编译：

// theme-light.scss
$primary-color: #42b983;
$secondary-color: #35495e;

// theme-dark.scss
$primary-color: #000000;
$secondary-color: #333333;

在 vue.config.js 中配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/theme-${process.env.VUE_APP_THEME}.scss";`
      }
    }
  }
}

通过环境变量切换主题：

process.env.VUE_APP_THEME = 'dark'

使用 class 切换实现主题变化

定义多套主题 class：

.theme-light {
  --primary-color: #42b983;
  --secondary-color: #35495e;
}

.theme-dark {
  --primary-color: #000000;
  --secondary-color: #333333;
}

在根元素上动态切换 class：

methods: {
  switchTheme(theme) {
    document.documentElement.className = theme
  }
}

使用 Vuex 持久化存储主题状态

在 Vuex 中存储当前主题：

const store = new Vuex.Store({
  state: {
    theme: 'light'
  },
  mutations: {
    setTheme(state, theme) {
      state.theme = theme
    }
  }
})

配合 localStorage 持久化：

// 初始化时读取
const savedTheme = localStorage.getItem('theme') || 'light'
store.commit('setTheme', savedTheme)

// 切换时保存
localStorage.setItem('theme', newTheme)

使用第三方库实现换肤

安装 vue-theme-switcher 等专门的主题切换库：

npm install vue-theme-switcher

在组件中使用：

import { ThemeSwitcher } from 'vue-theme-switcher'
Vue.use(ThemeSwitcher)

// 切换主题
this.$theme.set('dark')

动态加载样式文件实现换肤

创建多套主题 CSS 文件，通过动态加载 <link> 标签切换：

function loadTheme(themeName) {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = `/themes/${themeName}.css`
  document.head.appendChild(link)

  // 移除旧主题
  const oldLinks = document.querySelectorAll('link[rel="stylesheet"]')
  oldLinks.forEach(link => {
    if (link.href.includes('/themes/')) {
      link.remove()
    }
  })
}

使用 CSS 预处理器 mixin 管理主题

创建主题 mixin 文件：

// _themes.scss
@mixin theme($theme) {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: black;
    color: white;
  }
}

在组件样式中应用：

.component {
  @include theme($theme);
}