Recent projects to realize the skin effect, it took me a stupid way to achieve it,,, my train of thought three
In the first place in the external index. Introduce the theme of the whole project style HTML file
<link rel="stylesheet" id="style" href="https://bbs.csdn.net/topics/static/css/theme.css" & gt;
Then, in the app. Vue file under the life cycle of a hook function, put a the
Created () {
Var style=localStorage. The getItem (" style ");
If (style) {
$(" # style "). Attr (" href "style);//implementation will subject kept in memory refresh your browser doesn't change
}
}

Implementation in local judgment when the page is initialized in the localstorage style style, rendered
Next, only need to place a button on a page, a trigger button, the incoming parameters, then render your written different style of CSS, the
will realize the skin effectChange (e) {
If (e==1) {
$(" # style "). Attr (" href ", "../static/CSS/themefire. CSS ");
LocalStorage. SetItem (" style ", "../static/CSS/themefire. CSS ");
} else if (e==2) {
$(" # style "). Attr (" href ", "../static/CSS/themefreeze. CSS ");
LocalStorage. SetItem (" style ", "../static/CSS/themefreeze. CSS ");
}
.//here if you want to have more styles to choose, put here
}

I still have a way of thinking is that judgment with ajax requests the background current theme, and then use js to render, but I found that if the user's network status is not good after implementation, the style will be flashing,,,
The great god of project to do with me and said that processing is not very good, but great spirit high cold, didn't tell me his train of thought, and don't know if friends have a better idea?

CodePudding user response:

Switch the CSS, such as https://revealjs.com/#/themes

Switch the class to use different CSS selector, such as https://codepen.io/MoYummy/pen/ERJrZO

CodePudding user response:

https://segmentfault.com/a/1190000009762198#articleHeader2

CodePudding user response:

The building Lord excuse me this, I did the same, CSS is not effective after switching is why

CodePudding user response: