Recently, I encountered a need to switch the theme skin during the development of a project. The development process was specially sorted out for everyone to discuss and learn together.
First of all, we have to write the scss file required by the project in the style under the src file. This process is quite disgusting, and the project manager has to write a few sets of colors for a few sets. Personally, I suggest creating a new folder in the paper style to store you The style of writing. 
It is worth noting that when writing scss files, we have to write a class selector on the outer layer of all css styles to wrap all styles in it.
as the picture shows,
.theme-bule{
}
.theme-bule{} wraps all the styles in it. This step is very important. Don’t take the name randomly. You should know the meaning by name, and then other theme colors needed by the project should be written in the same way. , Then create a (index.scss) file in this style folder to export all the styles, and
then find a file (index.scss) in the style folder [ps: the index.scss file here and the one you created The index.scss file in the theme color folder is different.] This index.scss file comes with the element-admin framework. The purpose is to introduce all styles into the (main.js) file to take effect globally. Next, we need to encapsulate a method of setting the theme in the utils file. It is very simple, just say that the dynamic class name is given to the page body. The class that I just wrapped in the theme color css style will be dynamically replaced to achieve a skin change. Effect.
With this step, it is not enough. In order to keep the theme color unchanged, I chose to store it in localStorage. For this reason, I specially encapsulated a method for setting localStorage and obtaining localStorage.
/**
* 存储localStorage
*/
export const setStore = (params = {
}) => {
let {
name,
content,
type,
} = params;
name = keyName + name
let obj = {
dataType: typeof (content),
content: content,
type: type,
datetime: new Date().getTime()
}
if (type) window.sessionStorage.setItem(name, JSON.stringify(obj));
else window.localStorage.setItem(name, JSON.stringify(obj));
}
/**
* 获取localStorage
*/
export const getStore = (params = {
}) => {
let {
name,
debug
} = params;
name = keyName + name
let obj = {
},
content;
obj = window.sessionStorage.getItem(name);
if (validatenull(obj)) obj = window.localStorage.getItem(name);
if (validatenull(obj)) return;
try {
obj = JSON.parse(obj);
} catch{
return obj;
}
if (debug) {
return obj;
}
if (obj.dataType == 'string') {
content = obj.content;
} else if (obj.dataType == 'number') {
content = Number(obj.content);
} else if (obj.dataType == 'boolean') {
content = eval(obj.content);
} else if (obj.dataType == 'object') {
content = obj.content;
}
return content;
}
I also considered that if a certain color cannot be used normally for some reasons, I have to let it have a default color, so I use vuex, and I created a common.js file under the store folder to store it.
This file introduces the method of setting localStorage and obtaining localStorage that I just encapsulated
themeName: getStore({
name: 'themeName' }) || 'theme-bule',
The theme-bule behind the || operator is the default color, and then we are coming to the page to change the theme.
The introduction of the theme setting method and vuex
js code is
OK, you can go to the page to try the effect. The
effect is quite nice. It is worth noting that when writing css styles, you may encounter many style settings that have no effect. You might as well try the secret weapon.
color:#262d37 !important;
That's right, it's this'!important', the effect of leverage, the authoritarian and difficult style.