自定義主題

element 預設提供一套主題，css 命名採用 bem 的風格，方便使用者覆蓋樣式。我們提供了三種方法，可以進行不同程度的樣式自定義。

element 的 theme-chalk 使用 scss 編寫，如果你的專案也使用了 scss，那麼可以直接在專案中改變 element 的樣式變數。新建乙個樣式檔案，例如element-variables.scss，寫入以下內容：

/* 改變主題色變數 */
$--color-primary: teal;
/* 改變 icon 字型路徑變數，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

之後，在專案的入口檔案中，直接引入以上樣式檔案即可（無需引入 element 編譯好的 css 檔案）：

import vue from 'vue'
import element from 'element-ui'
import './element-variables.scss'
vue.use(element)

需要注意的是，覆蓋字型路徑變數是必需的，將其賦值為 element 中 icon 圖示所在的相對路徑即可。

如果你的專案沒有使用 scss，那麼可以使用命令列主題工具進行深層次的主題定製：

¶安裝工具

首先安裝「主題生成工具」，可以全域性安裝或者安裝在當前專案下，推薦安裝在專案裡，方便別人 clone 專案時能直接安裝依賴並啟動，這裡以全域性安裝做演示。

npm i element-theme -g

安裝白堊主題，可以從 npm 安裝或者從 github 拉取最新**。

# 從 npm npm i element-theme-chalk -d # 從 github

npm i -d

¶初始化變數檔案

主題生成工具安裝成功後，如果全域性安裝可以在命令列裡通過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;
...

¶修改變數

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

$--color-primary: red;

¶編譯主題

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

et
> ✔ build theme font
> ✔ build element theme

¶引入自定義主題

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

import '../theme/index.css'
import elementui from 'element-ui'
import vue from 'vue'
vue.use(elementui)

¶搭配外掛程式按需引入元件主題

如果是搭配babel-plugin-component一起使用，只需要修改.babelrc的配置，指定stylelibraryname路徑為自定義主題相對於.babelrc的路徑，注意要加~。


]]]}

如果不清楚babel-plugin-component是什麼，請閱讀快速上手一節。更多element-theme用法請參考專案倉庫。

自定義主題

vant自定義主題

自定義ExtJS主題

為Xcode自定義主題

自定義主題

vant自定義主題

自定義ExtJS主題

為Xcode自定義主題

相關推薦