1.首先安裝「主題生成工具」

npm i element-theme -g

2.安裝白堊主題，可以從 npm 安裝或者從 GitHub 拉取最新程式碼。

# 從 npm
npm i element-theme-chalk -D

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

3.初始化變數檔案

 主題生成工具安裝成功後，如果全域性安裝可以在命令列裡通過 et 呼叫工具，如果安裝在當前目錄下，需要通過 node_modules/.bin/et 訪問到命令。執行 -i 初始化變數檔案。預設輸出到 element-variables.scss

et -i [可以自定義變數檔案]

> ✔ Generator variables file

如果使用預設配置，執行後當前目錄會有一個 element-variables.scss 檔案。內部包含了主題所用到的所有變數，它們使用 SCSS 的格式定義。大致結構如下：

$--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;

...
 

4修改變數

直接編輯 element-variables.scss 檔案，例如修改主題色為紅色。

$--color-primary: red;

5編譯主題 

儲存檔案後，到命令列裡執行 et 編譯主題，如果你想啟用 watch 模式，實時編譯主題，增加 -w 引數；如果你在初始化時指定了自定義變數檔案，則需要增加 -c 引數，並帶上你的變數檔名

et

> ✔ build theme font
> ✔ build element theme

6引入自定義主題

預設情況下編譯的主題目錄是放在 ./theme 下，你可以通過 -o 引數指定打包目錄。像引入預設主題一樣，在程式碼裡直接引用 theme/index.css

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

注意  若已經引入了elementUI的chalk下的index.css,需要將自定義的css引入在其下行,以免被覆蓋。