Vue的elementUI实现自定义主题

npm i element-theme -g

# 从 npm

npm i element-theme-chalk -D

# 从 GitHub

npm i https://github.com/ElementUI/theme-chalk -D

et -i [可以自定义变量文件，默认为element-variables.scss]

> ? Generator variables file

$--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: #eb9e05 !default;

$--color-danger: #fa5555 !default;

$--color-info: #878d99 !default;

...

$--color-primary: purple;

et

> ? build theme font

> ? build element theme

import '../theme/index.css'

import ElementUI from 'element-ui'

import Vue from 'vue'

Vue.use(ElementUI)