CSS variables to achieve skin function

/** CSS * :root is used to set global CSS variables. Each CSS selector can use */
 
:root{
  --theme:#fff;
}

/** * Of course, CSS variables can also be declared locally * var() to use CSS variables */
 
.main{-color:red;
  background-color:var(--theme);
  color:var(--color)
}

Copy the code

<! -- Based on Vue -->

<div class="main" @click="handleChangeTheme">I change the skin</div>

Copy the code

/ / js parts
methods: {handleChangeTheme(){
    // The CSS variable is in front of the parentheses, followed by the changed property value
    document.body.style.setProperty('--theme'.'# 000'); }}Copy the code