A recent corporate project redesign, this time using element UI. As a modern software project, future support for peels, or default peels depending on the system options, should be considered. So the requirements are as follows:

demand

  1. Users can switch color themes within the software (functional requirements).
  2. Original theme modification based on Element.
  3. Sass variables can be used in Vue projects.
  4. Gets color variables based on theme in the JS environment.
  5. Font ICONS can also switch colors according to the theme.

plan

After looking up some articles and lying down for a while, I found a solution:

  1. Create a new folder within assets, such as the Themes folder, to store the theme files.
  2. To create the theme variable that you want to modify, the defauit.scss file looks like this:
*/ $--color-primary:#00B9AD;
$--color-success: #05AA65;
$--color-warning: #FF9227;
$--color-danger: #F64346;
$--color-info: #BABEC5;
$--color-text-primary: # 202021;
$--color-text-secondary: # 606266;
$--background-color-base: #F7F8FA;// Map to CSS native variables#app {
  --Main:#00B9AD;
  --test:#FF9227;
}
Copy the code

Note here that the #app here is the variable scope that refers to the #app node of VUE, which needs to be mapped in order to always use variable names in VUE components.

** Note: CSS default variable assignment, is space sensitive, best not to add Spaces when assignment! ** Also note that some elements only support HEX values, so use HEX instead of RGB. (pit)

The black. SCSS file looks like this:

*/ $--color-primary:# 000;
$--color-success: #05AA65;
$--color-warning: #FF9227;
$--color-danger: #F64346;
$--color-info: #BABEC5;
$--color-text-primary: # 202021;
$--color-text-secondary: # 606266;
$--background-color-base: #F7F8FA;// Map to CSS native variables#app {
  --Main:# 000;
  --test:#FF9227;
}
Copy the code
  1. The style index index. SCSS file is as follows:
/* Change icon font path variable, required */ --font path:'~element-ui/lib/theme-chalk/fonts';

.defaultTheme {
  @import './default.scss';
  @import "~element-ui/packages/theme-chalk/src/index";
}
.blackTheme {
  @import './black.scss';
  @import "~element-ui/packages/theme-chalk/src/index";
}
Copy the code

Put the original theme configuration in the. DefaultTheme {} class along with the self-written configuration.

  1. The vuevue.config.jsIf you do not have this file, you can create it in the root directory (vue2.6+ or above) :
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/themes/index.scss"; '}}}}Copy the code
  1. You can then use methods in VUE components to change themes.
 data() {
    return {
       themesName: 'defaultTheme',
    }
  },

 methods: {
    themes() {
        this.themesName = 'blackTheme'document.body.className = this.themesName; }}Copy the code

Analyze:

1. Create a themesName variable in data to store the default topic name. 2. Pass a theme name and add the theme name to the body style document.body.className = this.themesName;

Then you can switch themes! I need to pass in the color number in the control property to achieve the color switch. How to do?

Get the theme color number dynamically using CSS default variables

This is where the color mapping in the Sass file above comes in handy:

// black.scss
#app {
  --Main:# 000;
  --test:#FF9227;
}

Copy the code

The CSS variable Main:#000 is created under the #app node. GetComputedStyle (document.getelementById (‘app’)).getPropertyValue(‘–Main’)

Then, when the project is initialized, the color number of this node can be obtained from the created function of the life cycle, stored in data, and then bound to the place where the icon color needs to be passed in. That is, the icon color number can be switched.

created() {
    document.body.className = this.themesName;
    this.color = getComputedStyle(document.getElementById('app')).getPropertyValue('--Main')}Copy the code

Note that every time you switch themes, update the color number by getting the color variable.

themes() {
      this.themesName = 'blackTheme'
      document.body.className = this.themesName;
      this.color = getComputedStyle(document.getElementById('app')).getPropertyValue('--Main')}Copy the code

Use topic variables in VUE components

Color: var(–Main); var(–Main)

<style lang="scss" scoped>

.main {
    color: var(--Main)
}

</style>
Copy the code

OK, now I can happily switch colors and get the color number of the current theme color at any time. Mommy no longer needs to worry about whether my SVG color changes or not.

PS: Just to make fun of it, the Element group is all about asking questions, but there is no one in the group to help you solve the problem. You feel so lonely, which is really not as good as ANTD, there are many fans in the QQ group. And the quality of the documentation is… Don’t say the 😭