当前位置：首页 > VUE

vue实现皮肤切换

2026-03-26 21:14:55VUE

Vue 实现皮肤切换的方法

使用 CSS 变量动态切换主题

定义全局 CSS 变量，通过修改变量值实现皮肤切换。在 App.vue 或根组件中定义变量：

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

在组件中使用这些变量：

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

通过 JavaScript 动态修改变量：

function changeTheme(theme) {
  document.documentElement.style.setProperty('--primary-color', theme.primaryColor);
  document.documentElement.style.setProperty('--secondary-color', theme.secondaryColor);
}

使用 SCSS/LESS 预处理器

利用预处理器变量和 mixin 实现主题切换。创建主题文件 theme.scss：

$themes: (
  light: (
    primary: #42b983,
    secondary: #35495e,
    text: #2c3e50
  ),
  dark: (
    primary: #1e1e1e,
    secondary: #3e3e3e,
    text: #ffffff
  )
);

使用 mixin 应用主题：

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

使用 Vuex 管理主题状态

在 Vuex store 中保存当前主题：

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

组件中通过计算属性获取当前主题：

computed: {
  currentTheme() {
    return this.$store.state.currentTheme;
  }
}

动态加载 CSS 文件

为每个主题创建单独的 CSS 文件，动态加载：

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

使用 CSS Modules 和 class 切换

为每个主题创建单独的样式模块，通过切换 class 实现主题变更：

<template>
  <div :class="[themeClass]">
    <!-- 内容 -->
  </div>
</template>

<script>
import lightTheme from './themes/light.module.css';
import darkTheme from './themes/dark.module.css';

export default {
  data() {
    return {
      currentTheme: 'light',
      themes: {
        light: lightTheme,
        dark: darkTheme
      }
    };
  },
  computed: {
    themeClass() {
      return this.themes[this.currentTheme];
    }
  }
};
</script>

持久化主题选择

使用 localStorage 保存用户选择的主题：

methods: {
  setTheme(theme) {
    this.currentTheme = theme;
    localStorage.setItem('userTheme', theme);
    this.applyTheme();
  },
  applyTheme() {
    document.documentElement.setAttribute('data-theme', this.currentTheme);
  },
  loadTheme() {
    const savedTheme = localStorage.getItem('userTheme') || 'light';
    this.setTheme(savedTheme);
  }
},
created() {
  this.loadTheme();
}

响应式主题切换

结合媒体查询实现自动切换暗黑模式：

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #1e1e1e;
    --secondary-color: #3e3e3e;
    --text-color: #ffffff;
  }
}

JavaScript 检测系统主题变化：

vue实现皮肤切换

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addListener((e) => {
  const theme = e.matches ? 'dark' : 'light';
  this.setTheme(theme);
});

以上方法可以根据项目需求单独使用或组合使用，实现灵活的主题切换功能。