// 預設主題
$default-theme :
( header-bg-color: linear-gradient(
#009999,#008888),
header-font-color:#fff,
menu-color:#009999,);
//黑色主題
$black-theme :
( header-bg-color:linear-gradient(
#888,#333),
header-font-color:#fff,
menu-color:#444,);
//藍色主題
$blue-theme :
( header-bg-color:linear-gradient(
#409eff,#409ddd),
header-font-color:#fff,
menu-color:#409eff,);
$themes:(
default-theme: $default-theme,
blue-theme: $blue-theme,
black-theme:$black-theme);
//遍歷生成對應樣式表
@mixin base-bg-color(
$color)'
]&}}
'nowtheme'
>
<
!-- data-theme繫結變數 -->
<
!-- 需要快取的檢視元件 -->
"$route.meta.keepalive"
>
<
!-- 不需要快取的檢視元件 -->
"!$route.meta.keepalive"
>
export default
}, watch: }}
"theme" placeholder=
"請選擇" @change=
"changetheme"
>
"item in themes" :key=
"item.value" :label=
"item.label" :value=
"item.value"
>
export default ,,]}
}, methods: )},
changetheme(value)
}}
最終效果
換膚功能的實現
記得大概兩年前做過一款應用，涉及的主題 的更換，並不是單純的只換背景顏色，導航欄顏色，很類似於qq裡面的 更換，而是需要更換整個應用的80 還有包括一部分的字型.講完ui布局之後開始設計 2.分頁面設計，儘量減少常駐記憶體的ui，實際上，只有那3個主介面時常駐的，其他的ui都不是常駐。這樣在頁面被開...
WPF 實現換膚功能
將所有控制項的基本樣式匯集到乙個資源字典中，構成介面的基本樣式檔案，然後進行不同顏色 的定製。即在新的 資源字典檔案中引入基本樣式檔案，然後使用資源繼承，並且只設定控制項的顏色屬性等，形成乙個 檔案。注意 在設定不同 檔案時，不同控制項的樣式名字必須固定，只改變其顏色就能形成新的 因為在介面xaml...
前端實現換膚功能
專案背景 由於專案要求,需要前端對不同的企業使用者展示不一樣的顏色,也就是簡單的更改膚色.本來使用前端框架會很容易解決,但是公司目前的架構不是很好,前後端分離也沒有那麼徹底,web工程還是搭配jsp,沒辦法,只好用最純粹的css來實現換膚要求了.最開始沒怎麼想,決定使用最簡單的方法,根據不同的顏色方...