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
// 動態切換主題色
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 字型路徑變數，必需 */
$--font-path
:'~element-ui/lib/theme-chalk/fonts'
;@import
"~element-ui/packages/theme-chalk/src/index"
;

size

="small"
@change
="changecolor"
v-model
="maincolor"
>
el-color-picker
>

import

from
'@/utils/themecolorclient'
export
default},
methods:)}
}}

vue 實現主題換膚 element ui

npm i webpack theme color replacer dvue.config.jsconst webpack require webpack const themecolorreplacer require webpack theme color replacer const for...

Vue中如何使用sass實現換膚 更換主題 功能

原理 通過設定html的attribute屬性在封裝的函式中進行判斷，進行相應的設定不同的顏色 css中 可以識別到在html標籤上設定的屬性，所以在html上對應屬性發生變化時，就會執行相應的樣式，這一步有點類似於平時給div新增乙個.active屬性，css自動執行相應樣式。1.首先切換的樣式檔...

換膚 更換主題

1.思路 動態插入 css 覆蓋之前樣式 編輯不同主題類動態載入 統一載入樣式檔案 2.實現方式 2.1 若是單頁 或者設計比較好的模板頁面，可以在 html 頂部前置乙個 js 檔案處理 不同主題 下將要用到的樣式檔案.2.2 使用 onload 方法載入完畢執行後續 配合共用 css 檔案效果更...