在第一次聽專案中需要切換主題的時候感覺挺好解決的，不就是切換個主題顏色嗎，但是真正輪到自己上手的時候就發現無從下手，於是在網上瀏覽了一些前端大牛寫的文章，發現現在使用css預編譯處理比較推薦我就嘗試了一下，由於專案中使用的是stylus，所以文字具體介紹使用stylus實現主題切換，話不多說，直接開始：
如果專案中沒有引入stylus，請先引入stylus。
主要思路是使用js控制切換data-theme的值來控制換膚
1. 新建乙個styl檔案themes.styl用來存放主題配置
bright =
dark =
themelist =
(bright dark)
;
@import
"./variable.stylus"
;//引入配置
//獲取背景色
bg_color
($color)
//預設樣式（任意選擇乙個主題即可注意要和下面的預設主題一致）
background-color: bright[$color]
;for item in themelist
//判斷html的data-theme的屬性值，{}是stylus插值
[data-theme =]&
//獲取字型顏色
font_color
($color)
color: bright[$color]
;for item in themelist
[data-theme =]&
="card"
>
"progresstitle"
:progressary=
"progressary"
>
<
/progresscard>
<
/div>
"stylus" scoped>
@import
"~@/assets/stylus/mixin.styl"
;.card
<
/style>
"chengtheme('bright')"
>淺色<
/button>
"chengtheme('dark')"
>深色<
/button>
<
/div>
//js
chengtheme
(theme: string)
推薦乙個非常不錯的stylus中文文件
easyui切換主題
首先頁面肯定先導入easyui相關的 相關介面,我定義了乙個切換主題的 更換 default black bootstrap gray metro metro blue metro gray metro green metro red metro orange ui cupertino ui dar...
WordPress 主題切換
對於乙個喜歡把自己的部落格打扮的很酷或很靚,卻又不懂設計 的使用者來說.選擇 wordpress,就是選擇了幸福.選擇wordpress主題 選擇 wordpress 主題是一件比較累人的事情,因為主題太多太 多了,總想選乙個最好的,更好的,總想著 沒有最好,只有更好.我見過很多朋友,選的頭快 了也...
ios 主題切換 思路 iOS 最基礎的主題切換
首先，建立乙個主題管理的單例類 id shareinstance 設定主題色 void setthemecolor uicolor color 獲取主題色 uicolor getthemecolor 設定字型 void setthemefont cgfloat fontsize 獲取字型 cgflo...