Vue Element-ui one-click skinning solution (second type)

Table of contents

foreword

1. Create a new class name

2. Define variables

3. Use

 4. About the logic of switching topics

Summarize

---

foreword

Because it involves styles other than the ui library, two styles or more colors need to be configured, so this solution appears.

---

1. Create a new class name

First, find the element folder in style. In base-variable.scss, I directly created two new class names, light color and dark color (only these two theme colors are needed in the project)

2. Define variables

   In these two class names, the written color variables must be consistent.

 

  Follow the scss rules, in the two class names, after defining the color variable, define a color variable starting with -- again, this is the color variable we need to use later in the vue file,

 

3. Use

 4. About the logic of switching topics

This is written in a js file, and then use whatever you need.

 // 存储值
 function saveStorage(theme) {
    window.sessionStorage.setItem('theme', theme);
    toggleClass(document.body,`custom-${theme}`)
 }
 // 获取值
 function getTheme() {
  let theme = window.sessionStorage.getItem('theme') || '52ffff';
  console.log(theme, 'theme')
  toggleClass(document.body,`custom-${theme}`)
 }

 function toggleClass(element, className) {
  if (!element || !className) {
    return;
  }
  element.className = className;
}

 export { saveStorage,getTheme,toggleClass }

 

---

Summarize

Hope to help you!