假如要使用两套主题:蓝色、红色
例如:
首先确保自己的vue3项目有less,这边不多做接入解释
1、在src目录下建一个styles文件夹,在syles文件夹下面新建两个less文件:theme.less和variables.less;
theme.less的样式代码(默认的主题色):
@import './variables.less';
:root {
--primary-color: #e83d23; // 默认主题颜色
}
variables.less的样式代码(供切换的主题,可以制作多种,我这边只做两种):
.red-theme {
--primary-color: #e83d23;
}
.blue-theme {
--primary-color: #4c7bec;
}
2、使用vuex来管理,这边vuex怎么接入就不过多叙述,请先接入vuex;然后直接粘贴我里面的全部代码
store下面的index代码:
import { createStore } from 'vuex'
// 持久化的插件
import createPersistedState from "vuex-persistedstate"
const state = {
// 当前的主题
currentTheme: 'red-theme',
}
const getters = {
}
const mutations = {
// 切换主题的方法
switchTheme(state, theme) {
state.currentTheme = theme;
},
}
const actions = {
// 异步切换主题
switchTheme({ commit }, theme) {
commit('switchTheme', theme);
},
}
const modules = {
}
export default createStore({
state,
mutations,
actions,
getters,
modules,
plugins: [createPersistedState()],
})
3、在App.vue里面的顶层div使用我当前的样式class,这边直接粘贴代码:
App.vue:
<template>
<div :class="currentTheme">
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { mapState } from 'vuex'
export default defineComponent({
name: 'App',
components: {},
computed: {
...mapState(['currentTheme']),
}
})
</script>
主要代码是最外层div上面绑定的class,下面的router-view你们项目是怎样的就是怎样的,不用和我的一样,然后再是下面的计算属性,引入vuex里面的主题变量
4、在页面代码里面使用切换功能,就可以切换了,例如:
index.vue:
<template>
<div>
<button @click="switchTheme('red-theme')">点击切换为红色</button>
<button @click="switchTheme('blue-theme')">点击切换为蓝色</button>
<div class="test">测试切换主题</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
const currentTheme = ref('red-theme');
const switchTheme = (theme) => {
store.commit('switchTheme', theme)
}
</script>
<style lang="less" scoped>
.test {
// 使用第一步定义的样式变量
color: var(--primary-color);
}
</style>
至此就可以了,其实思路很简单:就是在根目录上面绑定样式,通过切换这个样式来做到主题的切换,如果使用的主题量很大,是不是就得考虑性能问题了...