Element Plus 默認提供一套主題篱蝇，CSS 命名采用 BEM 的風格姑原，方便使用者覆蓋樣式。element-ui提供了四種方法函喉，可以進行不同程度的樣式自定義避归。
僅替換主題色
如果僅希望更換 Element Plus 的主題色，推薦使用在線主題生成工具管呵。Element Plus 默認的主題色是鮮艷梳毙、友好的藍色。通過替換主題色撇寞，能夠讓 Element Plus 的視覺更加符合具體項目的定位顿天。
使用上述工具，可以很方便地實時預覽主題色改變之后的視覺蔑担，同時它還可以基于新的主題色生成完整的樣式文件包牌废，供直接下載使用（關于如何使用下載的主題包，請參考本節(jié)「引入自定義主題」和「搭配插件按需引入組件主題」部分）啤握。
在項目中改變 SCSS 變量
Element Plus 的 theme-chalk 使用 SCSS 編寫鸟缕，如果你的項目也使用了 SCSS，那么可以直接在項目中改變 Element Plus 的樣式變量。新建一個樣式文件懂从，例如 element-variables.scss授段，寫入以下內容：
/* 改變主題色變量 */
$--color-primary: teal;
/* 改變 icon 字體路徑變量，必需 */
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";
之后番甩，在項目的入口文件中侵贵，直接引入以上樣式文件即可（無需引入 Element Plus 編譯好的 CSS 文件）：
import Vue from 'vue'
import ElementPlus from 'element-plus'
import './element-variables.scss'
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
需要注意的是，覆蓋字體路徑變量是必需的缘薛，將其賦值為 Element Plus 中 icon 圖標所在的相對路徑即可窍育。
命令行主題工具
如果你的項目沒有使用 SCSS，那么可以使用命令行主題工具進行深層次的主題定制：
安裝工具
首先安裝「主題生成工具」宴胧，可以全局安裝或者安裝在當前項目下漱抓，推薦安裝在項目里，方便別人 clone 項目時能直接安裝依賴并啟動恕齐，這里以全局安裝做演示
npm i element-theme -g
安裝白堊主題乞娄，可以從 npm 安裝或者從 GitHub 拉取最新代碼。
# 從 npm
npm i element-theme-chalk -D
# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
初始化變量文件
主題生成工具安裝成功后显歧，如果全局安裝可以在命令行里通過 et 調用工具仪或，如果安裝在當前目錄下，需要通過 node_modules/.bin/et 訪問到命令士骤。執(zhí)行 -i 初始化變量文件溶其。默認輸出到 element-variables.scss，當然你可以傳參數(shù)指定文件輸出目錄敦间。
et -i [可以自定義變量文件]
> ? Generator variables file
如果使用默認配置，執(zhí)行后當前目錄會有一個 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;
...
修改變量
直接編輯 element-variables.scss 文件契沫，例如修改主題色為紅色带猴。
$--color-primary: red;
編譯主題
保存文件后，到命令行里執(zhí)行 et 編譯主題懈万，如果你想啟用 watch 模式拴清，實時編譯主題，增加 -w 參數(shù)会通；如果你在初始化時指定了自定義變量文件口予，則需要增加 -c 參數(shù)，并帶上你的變量文件名涕侈。默認情況下編譯的主題目錄是放在 ./theme 下沪停，你可以通過 -o 參數(shù)指定打包目錄。
et
> ? build theme font
> ? build element theme
使用自定義主題
引入自定義主題
和引入默認主題一樣，在代碼里直接引用「在線主題編輯器」或「命令行工具」生成的主題的 theme/index.css 文件即可木张。
import { createApp } from 'vue'
import '../theme/index.css'
import ElementPlus from 'element-plus'
createApp(App).use(ElementPlus)
搭配插件按需引入組件主題
如果是搭配 babel-plugin-component 一起使用众辨，只需要修改 .babelrc 的配置，指定 styleLibraryName 路徑為自定義主題相對于 .babelrc 的路徑舷礼，注意要加 ~鹃彻。
{
"plugins": [
[
"component",
{
"libraryName": "element-plus",
"styleLibraryName": "~theme"
}
]
]
}
如果不清楚 babel-plugin-component 是什么或者更多 element-theme 用法，請參考element-ui官網(wǎng)妻献。
