vue 實現主題換膚 element ui

npm i webpack-theme-color-replacer -

d

const webpack =

require
('webpack'
)const themecolorreplacer =
require
('webpack-theme-color-replacer'
)const forelementui =
require
('webpack-theme-color-replacer/forelementui'
)// 注意自己專案裡的引入路徑
require()
module.exports =)]
}}

module.exports =

import client from 'webpack-theme-color-replacer/client'

import forelementui from 'webpack-theme-color-replacer/forelementui'
// 注意自己專案裡的引入路徑
// 動態切換主題色
export function changethemecolor
(newcolor)
return client.changer.
changecolor
(options, promise)
.then((
)=>)}
export function initthemecolor()
}

// 覆蓋element-ui sass變數的資料夾

import
'./style/element-variables.scss'
// 主題換膚
import
from
'./utils/themecolorclient'
initthemecolor
()

/* 改變主題色變數 */

$--color-primary: #3296fa;
$input-color: #008cee;
$disabled-color: #f5f7fa;
$--color-text-placeholder: #ccc !
default
;$--font-color-disabled-base: #333
!default
;$--background-color-base: #f5f7fa !
default
;/* 一級邊框顏色 */
$--border-color-base: #c4cbda !
default
;$--radio-button-disabled-checked-fill: #333
!default
;$--select-option-disabled-color: #333
!default
;$--input-fill-disabled: #333
!default
;$--input-disabled-color: #333
!default
;// hover時border顏色
$--border-color-hover: $--color-primary !
default
;$--select-border-color-hover: $--border-color-hover !
default
;// 獲取焦點（輸入時）border的顏色
$--select-input-focus-border-color: $input-color !
default
;$--select-input-focus-border-color: $--color-primary !
default
;$--input-focus-border: $input-color !
default
;$--select-option-selected-hover: #ebf5ff !important;
$--select-option-hover-background: #ebf5ff !
default
;$--select-option-selected-font-color: $--color-primary !
default
;$--select-option-selected-hover: $--color-primary !
default
;/* 改變 icon 字型路徑變數，必需 */
vue 實現主題換膚 element ui
站在巨人的肩膀上開發之主題換膚 npm i webpack theme color replacer d2.1 vue.config.jsconst webpack require webpack const themecolorreplacer require webpack theme colo...
Vue中如何使用sass實現換膚 更換主題 功能
原理 通過設定html的attribute屬性在封裝的函式中進行判斷，進行相應的設定不同的顏色 css中 可以識別到在html標籤上設定的屬性，所以在html上對應屬性發生變化時，就會執行相應的樣式，這一步有點類似於平時給div新增乙個.active屬性，css自動執行相應樣式。1.首先切換的樣式檔...
換膚 更換主題
1.思路 動態插入 css 覆蓋之前樣式 編輯不同主題類動態載入 統一載入樣式檔案 2.實現方式 2.1 若是單頁 或者設計比較好的模板頁面，可以在 html 頂部前置乙個 js 檔案處理 不同主題 下將要用到的樣式檔案.2.2 使用 onload 方法載入完畢執行後續 配合共用 css 檔案效果更...