vue实现换肤

Vue 实现换肤功能

Vue 实现换肤功能可以通过多种方式实现，以下介绍几种常见的方法：

动态切换 CSS 类名

通过动态切换 CSS 类名实现换肤，适用于主题样式较少的情况。

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

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

<style>
.light {
  background-color: white;
  color: black;
}
.dark {
  background-color: black;
  color: white;
}
</style>

使用 CSS 变量

CSS 变量（CSS Custom Properties）可以更方便地实现动态换肤。

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

<script>
export default {
  data() {
    return {
      theme: 'light'
    }
  },
  computed: {
    cssVars() {
      return {
        '--bg-color': this.theme === 'light' ? '#ffffff' : '#000000',
        '--text-color': this.theme === 'light' ? '#000000' : '#ffffff'
      }
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
    }
  }
}
</script>

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

使用 Vuex 管理主题状态

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

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    theme: 'light'
  },
  mutations: {
    toggleTheme(state) {
      state.theme = state.theme === 'light' ? 'dark' : 'light'
    }
  },
  getters: {
    cssVars: state => {
      return {
        '--bg-color': state.theme === 'light' ? '#ffffff' : '#000000',
        '--text-color': state.theme === 'light' ? '#000000' : '#ffffff'
      }
    }
  }
})

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

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['cssVars'])
  },
  methods: {
    ...mapMutations(['toggleTheme'])
  }
}
</script>

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

使用 SCSS 变量和 Webpack

结合 SCSS 和 Webpack 的 sass-loader 实现更复杂的主题切换。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

// styles/variables.scss
$themes: (
  light: (
    bg-color: #ffffff,
    text-color: #000000
  ),
  dark: (
    bg-color: #000000,
    text-color: #ffffff
  )
);

@mixin theme($property, $key) {
  @each $theme, $colors in $themes {
    .#{$theme}-theme & {
      #{$property}: map-get($colors, $key);
    }
  }
}

<template>
  <div :class="`${theme}-theme`">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

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

<style lang="scss">
.app {
  @include theme('background-color', 'bg-color');
  @include theme('color', 'text-color');
}
</style>

使用第三方库

可以使用第三方库如 vue-theme-switcher 快速实现换肤功能。

npm install vue-theme-switcher

// main.js
import Vue from 'vue'
import ThemeSwitcher from 'vue-theme-switcher'

Vue.use(ThemeSwitcher, {
  themes: {
    light: {
      bgColor: '#ffffff',
      textColor: '#000000'
    },
    dark: {
      bgColor: '#000000',
      textColor: '#ffffff'
    }
  }
})

<template>
  <div>
    <button @click="$theme.switch('dark')">切换暗色主题</button>
    <button @click="$theme.switch('light')">切换亮色主题</button>
  </div>
</template>

以上方法可以根据项目需求选择适合的方式实现换肤功能。