当前位置：首页 > VUE

用vue实现换服

2026-03-30 01:24:21VUE

使用 Vue 实现换肤功能

动态切换 CSS 变量

在 Vue 项目中可以通过动态修改 CSS 变量来实现换肤。首先在全局样式文件中定义主题相关的 CSS 变量：

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

.dark-theme {
  --primary-color: #222222;
  --background-color: #1a1a1a;
}

在 Vue 组件中使用这些变量：

用vue实现换服

<template>
  <div class="app" :class="theme">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light-theme'
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light-theme' ? 'dark-theme' : 'light-theme'
    }
  }
}
</script>

<style>
.app {
  background-color: var(--background-color);
  color: var(--primary-color);
}
</style>

使用 CSS 预处理器

如果项目中使用 SCSS 或 Less 等预处理器，可以通过变量和 mixin 实现换肤：

$themes: (
  light: (
    primary-color: #409EFF,
    background-color: #f5f7fa
  ),
  dark: (
    primary-color: #222222,
    background-color: #1a1a1a
  )
);

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    .#{$theme-name}-theme & {
      $theme-map: $theme-map !global;
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

使用 Vuex 管理主题状态

对于大型项目，可以使用 Vuex 来集中管理主题状态：

用vue实现换服

// store.js
export default new Vuex.Store({
  state: {
    theme: 'light'
  },
  mutations: {
    setTheme(state, theme) {
      state.theme = theme
      localStorage.setItem('theme', theme)
    }
  },
  actions: {
    initializeTheme({ commit }) {
      const savedTheme = localStorage.getItem('theme') || 'light'
      commit('setTheme', savedTheme)
      document.documentElement.setAttribute('data-theme', savedTheme)
    },
    toggleTheme({ commit, state }) {
      const newTheme = state.theme === 'light' ? 'dark' : 'light'
      commit('setTheme', newTheme)
      document.documentElement.setAttribute('data-theme', newTheme)
    }
  }
})

使用第三方库

可以考虑使用现成的 Vue 主题切换库，如 vue-theme-switcher：

npm install vue-theme-switcher

import Vue from 'vue'
import ThemeSwitcher from 'vue-theme-switcher'

Vue.use(ThemeSwitcher, {
  themes: {
    light: {
      primary: '#409EFF',
      background: '#f5f7fa'
    },
    dark: {
      primary: '#222222',
      background: '#1a1a1a'
    }
  },
  defaultTheme: 'light'
})

持久化主题选择

为了在页面刷新后保持主题选择，可以将主题信息存储在 localStorage 中：

// 在应用初始化时读取保存的主题
const savedTheme = localStorage.getItem('theme') || 'light'
document.documentElement.className = `${savedTheme}-theme`

// 切换主题时保存选择
function toggleTheme() {
  const newTheme = currentTheme === 'light' ? 'dark' : 'light'
  document.documentElement.className = `${newTheme}-theme`
  localStorage.setItem('theme', newTheme)
}

以上方法可以根据项目需求选择使用，CSS 变量方法在现代浏览器中有良好支持，是最推荐的实现方式。

标签: vue