Custom theme Settings for elementUI

This is the 20th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

ElementUI provides the default theme, but also provides several custom themes for developers to customize components to varying degrees.

Here’s one of the ways I use it, using a way to just replace the theme color.

Install elementUI and Sass-loader,node-sass.

npm i element-ui -S
npm i sass-loader -D
npm i sass-loader -D
Copy the code

Sometimes sass will fail to be installed. You can install the fixed version number directly. Copy directly to package.json file and then NPM install

"Sass - loader", "^ 7.0.0", "node - sass" : "^ 4.12.0",Copy the code

Change SCSS variables in the project

Element’s theme-chalk is written using SCSS. If your project uses SCSS, you can change Element’s style variables directly in your project. Create a new style file, such as element-variable. SCSS, and write the following:

$-- primary: #32AE6E; $-- primary: #32AE6E; /* Change icon font path variable, required */ --font path: '.. /node_modules/element-ui/lib/theme-chalk/fonts'; @import ".. /node_modules/element-ui/packages/theme-chalk/src/index";Copy the code

3. In the entry file of the project, you can directly import the above style files (no need to import Element compiled CSS files) :

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)
Copy the code

This basically allows you to customize the theme to modify the color

Let’s take a look at elementUi’s other ways of changing themes.

Command line theme tools

Install the theme builder NPM I element-theme -g and initialize the variable file. If the default configuration is used, there will be an element-variable. SCSS file in the current directory after execution. Then use this file to modify some of the color changes between the various components. You can directly edit this file to change the color. Here is the main content structure

$--color-primary: #409EFF ! default; $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) ! default; /* 53a8ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) ! default; /* 66b1ff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) ! default; /* 79bbff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) ! default; /* 8cc5ff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) ! default; /* a0cfff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) ! default; /* b3d8ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) ! default; /* c6e2ff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) ! default; /* d9ecff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) ! default; /* ecf5ff */ $--color-success: #67c23a ! default; $--color-warning: #e6a23c ! default; $--color-danger: #f56c6c ! default; $--color-info: #909399 ! default;Copy the code

You can also use custom themes, which use an online theme editor or command line tool to generate the desired theme CSS file and then import it into the project

Custom theme Settings for elementUI