Skin change solution based on Vue combined with ElementUI

Written in front

The skin-changing function is not very common, but it is also in demand, so here are several front-end skin-changing solutions for your reference.

This article will introduce several skinning solutions based on Vue and Element-UI, and strive to be easy to understand and use. I hope you like it~

Solution 1: Use global style override (universal for front-end)

This should be the most common, easiest to think of, and easiest to implement solution.

We write a separate style sheet (css file deep space blue.css), starting with a specific name (such as .blue-theme), and then in this css file, complete the style code of our second skin. Then when we click on the skin change, we add the blue-theme class to the body tag, then at this time, our skin change effect will appear.

When we click on space blue here, class science-blue is added to body, and when we click on bronze green, science-blue is removed because our default is bronze green.

Solution 2: Customize your own Element-ui color scheme

The default Element color scheme is:

Element-UI also provides a custom color matching tool and configuration page. Through this tool or this page, we can customize the above five main colors and auxiliary colors.

After configuration, if it is a tool, generate it; if it is a web page, download it. Get a style file, which is the theme style file we configured.

Keep the relationship between the css file and the fonts directory unchanged (ps: this is very important) and put it into our project. (You can change the name of this CSS file to whatever you like, for example, I changed it to theme-summer.css)

Then in main.js of our project, comment out the original CSS file import of Element-UI and import the CSS file we just put into the project.

At this time, the color of Element-UI in the project becomes the color scheme we just customized. (Below is a set of colors I customized, what do you think?)

However, did you notice that this only changes the default color of Element-UI in our project to what we want? But what we want to do is to change the skin, and we hope that the color can be switched.

Therefore, we still use the above method to add a unique naming prefix to each CSS style in the generated CSS file, and then add this class to the body when changing the skin. In this way, we can also achieve a rich skin-changing function (because we can match many sets of beautiful color schemes ourselves)

Now the problem that needs to be solved is: how to add a namespace to this CSS file?

Let's take a look at the CSS file generated by this tool or exported from the configuration page. It is unrealistic to manually wrap a class around each style to make a namespace, so we need to use a gulp plug-in gulp-css-wrap to help us achieve this result.

first:

npm i gulp gulp-clean-css gulp-css-wrap -D

Then, write gulpfile.js

// gulpfile.js

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')

var customThemeName = '.theme-summer'

gulp.task('default', function() {
  return gulp.src( path.resolve('./index.css'))
    .pipe(cssWrap({selector: customThemeName}))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist'))
})

Then run gulp

This will give you a custom theme with .theme-summer as the namespace.

After adding, we can implement the skin switching function by following the method of switching the class of the body element introduced earlier.

Solution 3: Quickly change the website color

According to the Element official website, Element is written in SCSS. If your project also uses SCSS, you can directly change the style variables of Element in the project. Create a new element-variables.scss style file. (Reminder: Please make sure you have installed node-sass and sass-loader)

The element-variables.scss file is not posted here. You can see it here: element-variables.scss. This file defines many color variables.

This method is simple to use. You just need to import it

Modify the color variables inside to take effect.

This method is quick and can be effective by modifying a few color variables. (Then you can deploy it~)

Here is a question, how to modify the variables in this element-variables.scss file in js? If this can be achieved, then real-time dynamic color changing can be achieved.

Additional note: There is a solution to modify scss variables with js, but it is not possible to dynamically change colors in our project. Why? Because all the CSS precompiled languages ​​​​(sass, less, stylus) in our project will eventually be compiled into CSS; that is, there are only compiled CSS files in the packaged project. Then your method of changing scss variables with js will not work in the packaged project.

Solution 4: Change the main color in real time

We have introduced several methods for changing skins, but they are all within the limited range of skins we provide. However, we have a requirement that a color picker pops up, and then the main color of the page is immediately changed to the color we choose.
The ElementUI official website has implemented dynamic skinning, which allows users to customize color values ​​and the display effect is more elegant. Let's see how it is implemented (here is the official explanation of the implementation)

• Get the style file of the current version of Element-UI (online XHR acquisition)
• Generate a series of corresponding colors based on the theme color selected by the user (for example, if green is selected, generate different degrees of light green, dark green, etc.)
• Color replacement (replace the color in the style file with the color just generated)
• Add a style tag directly to the page and fill in the generated style

Let's take a look at the technical implementation details. I strongly recommend you to open the code and take a look: https://github.com/Neveryu/vue-cms/blob/master/src/views/theme/index.vue#L167-L297)

1. First, we need to get the version number of element-ui through package.json, and request the corresponding style according to the version number.

// If there is no chalk, it is the first time to change the color. You need to obtain the CSS file remotely and assign it to chalk
// Subsequent color change operations do not require remote acquisition if (!this.chalk) {
    const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
    await this.getCSSString(url, 'chalk')
}

The getCSSString method is a common XHR method used to obtain remote CSS resource files.

2. Generate the corresponding color according to the color selected by the user

/**
 * Pass in a color HEX and get the color array of shades of this color * We know that our default main color is blue, and in actual use, we also need corresponding light blue and dark blue * @param {[string]]} theme [color]
 * @return {[array]} [the corresponding array of light and dark colors]
 */
getThemeCluster(theme) {
    // See the code for details, I won’t write it here // ...
}

3. Color replacement

/* Update style - replace old color variables with new ones*/
updateStyle(style, oldCluster, newCluster) {
  let newStyle = style
  oldCluster.forEach((color, index) => {
    newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
  })
  return newStyle
}

4. Add a style tag to the page and fill in the generated style

let styleTag = document.getElementById(id)
if (!styleTag) {
  styleTag = document.createElement('style')
  styleTag.setAttribute('id', id)
  document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle

When you change the color for the first time, you need to create a style tag and add it to the body. You don't need to do this for subsequent color changes.

OK, let’s see the effect:

insert image description here

【Online demo: vue-cms】
[Source code: github.com/Neveryu/vue-cms]

This is the end of this article about the skin-changing solution based on Vue combined with ElementUI. For more relevant Vue combined with ElementUI skin-changing content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!