1彬呻、在線主題編輯器
官方提供的在線主題編輯器，可以直觀的查看修改后的效果柄瑰，編輯好下載闸氮，然后再引入到項(xiàng)目中。
主題定制
// /assets/styles/index.less
// @import "~element-plus/lib/theme-chalk/index.css";
@import 'theme/index.css';
// main.js
import '@/assets/styles/index.less';
2教沾、命令行主題工具
使用nodejs高版本安裝該工具后期執(zhí)行時(shí)會(huì)報(bào)錯(cuò)primordials is not defined蒲跨，如下圖所示。
報(bào)錯(cuò)截圖
建議先安裝node版本管理工具授翻，再來安裝命令行主題工具或悲。
2.1 win10安裝nodejs版本管理工具
nvm全名node.js version management孙咪，是一個(gè)nodejs的版本管理工具。通過它可以安裝和切換不同版本的nodejs巡语。
nvm應(yīng)用程序
下載款選安裝包后翎蹈，解壓安裝成功后，可進(jìn)行如下操作：
- 查看本地安裝的所有nodejs版本：
nvm list - 安裝指定nodejs版本：
nvm install 10.0.0 - 使用指定nodejs版本：
nvm use 10.0.0 - 卸載指定nodejs版本：
nvm unintstall 12.0.0 - 開啟nodejs版本切換：
nvm on - 關(guān)閉nodejs版本切換：
nvm off
通過node -v查看當(dāng)前nodejs版本男公。
2.2 自定義主題
為了使用element-theme主題工具，建議nodejs的版本設(shè)置為10.0.0枢赔。操作步驟如下：
- 安裝主題生成工具：
npm i element-theme -g - 創(chuàng)建臨時(shí)目錄：
mkdir element-theme cd element-theme- 安裝白堊主題：
npm i element-theme-chalk -D - 初始化變量文件：
et -i - 根據(jù)自己需要澄阳，修改element-variables.scss 文件
- 編譯主題：
et
編譯成功后，會(huì)在該目錄下生成theme文件夾踏拜，引入到項(xiàng)目中就行碎赢。
// /assets/styles/index.less
// @import "~element-plus/lib/theme-chalk/index.css";
@import 'theme/index.css';
// main.js
import '@/assets/styles/index.less';
3、修改SCSS變量
elementui樣式使用scss來編寫的执隧，可以通過修改scss變量來達(dá)到改變主題的效果揩抡。新建一個(gè)樣式文件，例如： element-style.scss
3.1 vue2（elementui）
/* 改變主題色變量 */
$--color-primary: teal;
/* 改變 icon 字體路徑變量镀琉，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
3.2 vue3（elementplus）
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
'white': #161616,
'black': #161616,
'primary': (
'base': #F85A1F,
),
'success': (
'base': #139705,
),
'warning': (
'base': #F85A1F,
),
'danger': (
'base': #B51212,
),
'error': (
'base': #B51212,
),
'info': (
'base': #161616,
)
),
$background-color-base: #161616 !default,
$border-color-hover: #F85A1F !default,
$border-color: (
'base': #161616,
'light': #D1D1D1,
'lighter': #FBFBFB,
'extra-light': #f2f6fc,
),
$text-color: (
'primary': #FBFBFB,
'regular': #FFE8D1,
'secondary': #D1D1D1,
'placeholder': #8F8F8F,
),
$border-radius: (
'base': 20px,
'small': 20px,
'round': 20px,
'circle': 100%,
)
);
// 如果你想導(dǎo)入所有樣式峦嗤，如下。 如果只是按需導(dǎo)入屋摔，則可以忽略以下內(nèi)容烁设。
@use "element-plus/theme-chalk/src/index.scss" as *;
最后，在項(xiàng)目的入口文件中钓试，直接引入以上樣式文件即可：
import './element-style.scss'
