guidance

As required by my recent work, I need to switch the theme color of the project. Share the theme color switch encountered problems, and solutions;

Project actual

Vue3 project, install rely on element-Plus, change the theme color, the element used in the project to the current theme color;

Element-plus theme color switch

At the end of the file on element-Plus’ official website, there are several options for switching theme colors:

– 1. Modify SCSS variables
  • Packages/theme – chalk/SRC/common/var. SCSS document finds the SCSS variable changes
  • Create a new style file, for examplestyles/element/index.scss 
    // styles/element/index.scss
/* Just rewrite what you need */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": green,
    ),
  ),
);
Copy the code
  • Then in your project entry file, import this style file to replace Element Plus’s built-in CSS
– 2,Modifying CSS variables
```scss
:root {
  --el-color-primary: green;
}
```

```js
const el = document.documentElement
// const el = document.getElementById('xxx')

// get css var
getComputedStyle(el).getPropertyValue(`--el-color-primary`)

// set css var
el.style['--el-color-primary'] = 'red'
```
Copy the code
– 3. Update SCSS variables
$--color-primary: teal; /* icon font path, must provide */ $--font path: '~element-plus/lib/theme-chalk/fonts'; @use '~element-plus/packages/theme-chalk/src/index'; ` ` `Copy the code
– 4,Cli Theme GenerationUse cli to create a.scss, modify variable values, and regenerate the corresponding.css file
  • The installation element – the theme
  • Install element – the theme – chalk
  • Et -i [Custom output file]
  • Edit the generated SCSS file
  • et
  • The CCS file is generated in the theme/ folder by default

Began to practice

Idea 1: Modify CSS variables

  • Method adopted: Scheme 2, modify CSS variables, this method is the most intuitive, and dynamic, color is not limited;

  • Ideas:

    const color = #121212
const el = document.documentElement
console.log(getComputedStyle(el).getPropertyValue(`--el-color-primary`))
el.style.setProperty("--el-color-primary", color);
Copy the code

  • Some components: el-button, el-Tag and other theme colors do not change, because the theme color of the component is not controlled by the CSS global variable, but the CSS variable in the component –el-button-background-color control.

    .el-button--primary {
    --el-button-font-color: #ffffff;
    --el-button-background-color: #409eff;
    --el-button-border-color: #409eff;
    --el-button-hover-color: #66b1ff;
    --el-button-active-font-color: #e6e6e6;
    --el-button-active-background-color: #0d84ff;
    --el-button-active-border-color: #0d84ff;
}
.el-button {
    --el-button-font-weight: var(--el-font-weight-primary);
    --el-button-border-color: var(--el-border-color-base);
    --el-button-background-color: var(--el-color-white);
    --el-button-font-color: var(--el-text-color-regular);
    background: var(--el-button-background-color, var(--el-color-white));
    border: var(--el-border-base);
    border-color: var(--el-button-border-color, var(--el-border-color-base));
    color: var(--el-button-font-color, var(--el-text-color-regular)); . }Copy the code

  • Solution: In addition to modifying CSS global variables, also need to modify component variables;

  • Inadequate:

    • Unmodified components are not fully covered, which needs to be checked one by one, which is time-consuming.
    • Not smart enough. Component variables in Element-Plus do not inherit from global variables.

  • Related links:

    • Many people in element-plus issues have encountered this problem and cannot solve it well for the time being.

    • Contributor offers suggestions:

    • We are trying a new way to remove some variables and be repeatedly packaged. We will try to reduce the css var exposed by each component, so as to achieve the convenience of custom variables, and at the same time, there are as few variables as possible. Before that, you can temporarily downgrade back to beta.55. When the optimization of the variables is completed, we will have a complete migration document.

    • And explains why the Button component is a local variable:

    • Unfortunately, the variables in button use sass's `mix` function to blend the corresponding shadows and dark effects as a percentage, and pure CSS variables can not implement mix functionality. We're also thinking about how to implement it more gracefully, whether to add a new mixed button variable, or something else.

    • As well as a temporary solution given in the case of element-plus-viet-starter, which is actually the idea of plan 1 and plan 2, but cannot dynamically change the theme color;

Thought 2: Theme-chalk
  • Idea: Use theme-chalk to generate the final CSS, and generate several theme color packages respectively. When switching the theme color, load the corresponding CSS dynamically, and the overlay takes effect.
  • Adoption method:
    • Use option 4 of Element-Plus: In fact, the Element-theme-chalk theme used in Option 4 is based on the Element-UI versionV2.0 +The generated CSS used in Elemental-Plus has compatibility issues;
    • The theme- Chalk file in Elemental-Plus has been written to generate theme code through gulp packaging, which can be adapted to dynamically generate CSS projects.
  • Solution:
    • 1. New Element-Plus SCSS files need to be copied because the project may be imported into other projects or exist independently;
    • Common /var. SCSS = var-origine.scss;
    • /var-origin. SCSS; /var-origin. SCSS; /var-origin. 
      @forward "./var-origin.scss" with (
    $colors: ('primary': (
        'base': $THEME_MODE, //red ... ) ...). ,...).Copy the code
    • 3. Based on the var-gen. SCSS file, you can use gulp-replace to replace custom variables such as $THEME_MODE with the corresponding theme color configuration values to generate the common/var. SCSS file.
    • 4. Package, compile SCSS file into CSS file, and output to specified directory;
    • 5. When switching the theme, load the corresponding theme CSS file to achieve dynamic theme switching;

The follow-up to optimize

  • 1. NPM package like element-theme, command line package to generate CSS file, copy SCSS file from root file element-plus;
  • 2. Optimized the configuration of custom variables, SCSS variables can be written in the file, read the file, and generate var.scss;
  • 3, elegant display output reminder;