Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how Vue uses CSS variables to switch themes". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Feasibility test

To verify the feasibility of the method, create a new themes folder under the public folder and a new default.css file in the themes folder:

: root {

-- color:red

}

Introduce the external style theme.css into the index.html file of the public folder as follows:

Vue-skin-peeler-demo

We'resorrybutvue-skin-peeler-demodoesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.

Then, use the CSS variable in Home.vue:

Turn red

Exportdefault {

Name:'home'

}

.demo {

Color:var (--color)

}

Then, run the project and open the page in the browser, and the page appears fine.

Note: @ vue/cli using the link tag to introduce the css style may report an error of "We'resorrybutvue-skin-peeler-demodoesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue." This is caused by @ vue/cli packaging all the files in the src directory through webpack, so the static file resources should be placed in the public (in the case of the @ vue/cli2.x version in the static) folder.

Achieve theme switching

The idea of topic switching here is to replace the href attribute of the link tag, so you need to write a replacement function to create a new themes.js file in the src directory as follows:

/ / themes.js

ConstcreateLink= () = > {

Let$link=null

Return () = > {

If ($link) {

Return$link

}

$link=document.createElement ('link')

$link.rel='stylesheet'

$link.type='text/css'

Document.querySelector ('head') .appendChild ($link)

Return$link

}

) ()

/ * *

* topic switching function

* @ param {string} theme- topic name, default default

* @ return {string} topic name

* /

ConsttoggleTheme= (theme='default') = > {

Const$link=createLink ()

$link.href= `. / themes/$ {theme} .css`

Returntheme

}

ExportdefaulttoggleTheme

Then, create two theme files, default.css and dark.css, under the themes file. Create CSS variables to achieve theming. CSS variable to switch topics, please refer to another article to get in touch with css variables for the first time

Compatibility

IE browsers and some older browsers do not support CSS variables, so you need to use css-vars-ponyfill, which is a ponyfill that provides client support for CSS custom properties (also known as "CSS variables") in both older and modern browsers. Since watch snooping is going to be turned on, MutationObserver.js is also installed.

Installation:

Npminstallcss-vars-ponyfillmutationobserver-shim--save

Then, introduce and use in the themes.js file:

/ / themes.js

Import'mutationobserver-shim'

ImportcssVarsfrom'css-vars-ponyfill'

CssVars ({

Watch:true

})

ConstcreateLink= () = > {

Let$link=null

Return () = > {

If ($link) {

Return$link

}

$link=document.createElement ('link')

$link.rel='stylesheet'

$link.type='text/css'

Document.querySelector ('head') .appendChild ($link)

Return$link

}

) ()

/ * *

* topic switching function

* @ param {string} theme- topic name, default default

* @ return {string} topic name

* /

ConsttoggleTheme= (theme='default') = > {

Const$link=createLink ()

$link.href= `. / themes/$ {theme} .css`

Returntheme

}

ExportdefaulttoggleTheme

When watch is turned on, clicking the switch theme switch in the IE11 browser does not work. Therefore, cssVars () is re-executed each time the theme is switched, but the theme cannot be switched because it is not valid to re-execute cssVars () when watch is turned on. Finally, you can only close watch and then turn it back on. The themes.js code for successfully switching topics is as follows:

/ / themes.js

Import'mutationobserver-shim'

ImportcssVarsfrom'css-vars-ponyfill'

ConstcreateLink= () = > {

Let$link=null

Return () = > {

If ($link) {

Return$link

}

$link=document.createElement ('link')

$link.rel='stylesheet'

$link.type='text/css'

Document.querySelector ('head') .appendChild ($link)

Return$link

}

) ()

/ * *

* topic switching function

* @ param {string} theme- topic name, default default

* @ return {string} topic name

* /

ConsttoggleTheme= (theme='default') = > {

Const$link=createLink ()

$link.href= `. / themes/$ {theme} .css`

CssVars ({

Watch:false

})

SetTimeout (function () {

CssVars ({

Watch:true

})

}, 0)

Returntheme

}

ExportdefaulttoggleTheme

This is the end of the content of "how to switch themes with CSS variables in Vue". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.