当前位置：首页 > VUE

vue实现主题切换

2026-01-18 11:10:56VUE

Vue 实现主题切换的方法

使用 CSS 变量动态切换主题

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

:root {
  --primary-color: #42b983;
  --bg-color: #ffffff;
  --text-color: #2c3e50;
}

.dark-theme {
  --primary-color: #1e88e5;
  --bg-color: #121212;
  --text-color: #ffffff;
}

在 Vue 组件中通过 document.documentElement.className 切换类名：

methods: {
  toggleTheme() {
    const htmlEl = document.documentElement
    htmlEl.className = htmlEl.className === 'dark-theme' ? '' : 'dark-theme'
  }
}

使用 Vuex 管理主题状态

安装 Vuex 并创建 store 管理主题状态：

// store/index.js
export default new Vuex.Store({
  state: {
    darkTheme: false
  },
  mutations: {
    toggleTheme(state) {
      state.darkTheme = !state.darkTheme
    }
  }
})

在组件中通过计算属性和方法切换主题：

computed: {
  isDarkTheme() {
    return this.$store.state.darkTheme
  }
},
methods: {
  toggleTheme() {
    this.$store.commit('toggleTheme')
    document.documentElement.className = this.isDarkTheme ? 'dark-theme' : ''
  }
}

使用第三方库 vue-theme-switcher

安装主题切换库：

npm install vue-theme-switcher

在 main.js 中引入并配置：

import ThemeSwitcher from 'vue-theme-switcher'
Vue.use(ThemeSwitcher, {
  themes: {
    light: {
      primary: '#42b983',
      background: '#ffffff'
    },
    dark: {
      primary: '#1e88e5',
      background: '#121212'
    }
  }
})

在组件中使用：

this.$theme.set('dark')  // 切换至暗色主题
this.$theme.set('light') // 切换至亮色主题

持久化主题选择

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

methods: {
  toggleTheme() {
    const newTheme = this.isDarkTheme ? 'light' : 'dark'
    localStorage.setItem('user-theme', newTheme)
    this.$store.commit('toggleTheme')
    document.documentElement.className = newTheme === 'dark' ? 'dark-theme' : ''
  }
},
created() {
  const savedTheme = localStorage.getItem('user-theme')
  if (savedTheme) {
    this.$store.commit('setTheme', savedTheme === 'dark')
    document.documentElement.className = savedTheme === 'dark' ? 'dark-theme' : ''
  }
}

vue实现主题切换