当前位置：首页 > VUE

vue实现主题切换

2026-02-19 03:38:16VUE

实现 Vue 主题切换的方法

使用 CSS 变量动态切换主题

在 Vue 项目中，可以通过 CSS 变量结合 Vue 的响应式特性实现主题切换。定义一个全局的 CSS 变量集合，通过修改这些变量来改变主题样式。

/* 全局样式文件中定义变量 */
:root {
  --primary-color: #409EFF;
  --background-color: #ffffff;
  --text-color: #303133;
}

.dark-theme {
  --primary-color: #536dfe;
  --background-color: #121212;
  --text-color: #e0e0e0;
}

在 Vue 组件中通过 v-bind 动态绑定样式：

<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-theme' : 'light'
    }
  }
}
</script>

使用 Vuex 管理主题状态

对于大型项目，可以使用 Vuex 集中管理主题状态，确保所有组件都能获取和修改当前主题。

// store.js
export default new Vuex.Store({
  state: {
    theme: 'light'
  },
  mutations: {
    setTheme(state, theme) {
      state.theme = theme
    }
  },
  actions: {
    toggleTheme({ commit, state }) {
      const newTheme = state.theme === 'light' ? 'dark' : 'light'
      commit('setTheme', newTheme)
    }
  }
})

在组件中使用：

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

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['theme'])
  },
  methods: {
    ...mapActions(['toggleTheme'])
  }
}
</script>

使用第三方库实现主题切换

对于更复杂的主题需求，可以使用专门的 UI 库或主题管理工具：

Element UI：通过修改 $--color-primary 等 SCSS 变量实现主题定制
Vuetify：内置主题系统，支持动态切换明暗主题
vue-theme-switcher：专门的主题切换插件

以 Vuetify 为例：

// 在创建 Vue 实例时配置主题
new Vue({
  vuetify: new Vuetify({
    theme: {
      dark: false,
      themes: {
        light: {
          primary: '#1976D2'
        },
        dark: {
          primary: '#2196F3'
        }
      }
    }
  })
})

在组件中切换主题：

this.$vuetify.theme.dark = !this.$vuetify.theme.dark

持久化主题选择

为了记住用户选择的主题，可以使用 localStorage 持久化存储主题偏好：

// 在 Vuex action 中
toggleTheme({ commit, state }) {
  const newTheme = state.theme === 'light' ? 'dark' : 'light'
  commit('setTheme', newTheme)
  localStorage.setItem('user-theme', newTheme)
}

// 在应用初始化时读取存储的主题
const savedTheme = localStorage.getItem('user-theme') || 'light'
commit('setTheme', savedTheme)

媒体查询自动匹配系统主题

可以结合 CSS 媒体查询自动检测用户系统主题偏好：

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #536dfe;
    --background-color: #121212;
  }
}

在 JavaScript 中检测：

vue实现主题切换

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