Recently do a topic switching function , Check the online implementation , What I found was not the effect I wanted , So I made a plan according to my own idea .
style.less // Define theme variables such as color and introduce them globally factory.js // Define how to modify the value of a variable vuex // Manage dynamic change theme style single value model
.js // Store fixed scheme theme style
First of all, we need to introduce a global one style.less file , This can be called directly in the project style.less Variables in , In order to achieve this function, we need to use plug-ins .
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
After the installation, add the
pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [
path.resolve(__dirname, "src/theme/style.less")] // Introducing global style variables } }
So far , We can already use it directly in the project style.less Variables in it
@baseColor:var(--baseColor, #4F94FA); @activeColor: var(--activeColor, #4F94FA)
; @fontColor:var(--fontColor, #4F94FA); :export { name: "less"; baseColor:
@baseColor; activeColor: @activeColor; fontColor:@fontColor; }
Component internal style
<style lang="less"> .app-header { background-color: @baseColor; } </style>
there :export Is to export variable values in styles , Unnecessary can not be used ,var(– Variable name , Variable value ) This is css For subsequent use in js update value .
/** * Switch theme to modify page style **/ export const changeStyle=(obj)=>{ for(let key in obj){
document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key])
; } }
Here, you can modify the value of page style by directly operating the page elements .
import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from
'./actions'; import * as getters from './getters'; import * as mutations from
'./mutations'; import Account from 'js/model/common/account'; Vue.use(Vuex);
const state = { baseColor:'#4F94FA' }; export default new Vuex.Store({ state,
actions, getters, mutations });
The changed value can be changed by vuex To manage the state Storage in baseColor

Binding in page
<el-color-picker v-model="$store.state.baseColor" @change="SwitchTheme" title="
theme " class="color"></el-color-picker>
Switch theme colors
SwitchTheme(){ let obj = { baseColor:this.$store.state.baseColor } changeStyle(
obj) }
Local storage of subject data
/** * Custom theme scheme **/ export const menusModel = { themeA: { baseColor:'#FFF',
activeColor:'#4f94fa', fontColor:'#333', }, themeB: { baseColor:'#FFF',
activeColor:'#4f94fa', fontColor:'#333', }, themeC: { baseColor:'#FFF',
activeColor:'#4f94fa', fontColor:'#333', }, themeD: { baseColor:'#FFF',
activeColor:'#4f94fa', fontColor:'#333', }, }
Read local or remote style data , adopt changeStyle To modify , The specific realization depends on individual needs

©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element