vue实现主题切换
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' : ''
}
}
