主題色切換功能實現

2021-09-08 05:24:53 字數 1146 閱讀 8171

1.使用window全域性變數，把當前**名稱變數寫入全域性，

const colorlist = ['default','red','green']; //全域性變數


window.themecolor=colorlist[0];       //寫入window物件
2.使用less生成對應**的樣式，使用less中的變數函式，通過不同的顏色引數生成對應顏色的**；

在less中設定主題色變數

@theme-color : #226cdc; //預設主題色


@red-theme-color:#fe2419;


@green-theme-color:#226cdc;
用header舉例主題色樣式寫法，html略

.header-style(@theme-color:@theme-color)}}


.title 


}.control-bar 


}}//呼叫函式生成相應的樣式


.header-style();  // 預設主題色


.red


.green
3.通過更改body的class名稱，實現換膚（核心）

let themecolor = localstorage.getitem('themecolor'); // 判斷是否已存在使用的**


if (themecolor) else 


document.body.classlist.add(window.cssstyle);  //body 新增less中主題色的class
4.換膚按鈕事件，更改**

changecolor(colortype,e)
呼叫changecolor函式更改主題色，changecolor（''1''），changecolor（''0''）

注意：在vue中需要在頁面渲染完以後在執行body新增class的操作。

整體換膚的思路就是通過less生成對應主題色樣式，給每一套主題樣式新增乙個class，然後通過修改body的class即可實現主題色切換，自己學習記錄，希望能給諸君帶來一點啟發。

the end

CI框架主題切換的功能

本人接觸到這個框架不就，屬於菜鳥 公司現在用ci框架做專案 老大要做乙個主題切換的功能，說明功能的要求我的腦子裡瞬間有幾個想法.腦子裡最簡單的就是設定全域性變數 如 從資料庫裡面查詢出資料然後使用 後面同事說這樣用麻煩 這樣的話沒個方法都要先查下 然後替換 world 因為world 是整個模板的檔...

修改element ui主題色

命令列主題工具 1 安裝主題工具 在自己安裝目錄下 執行 npm install element theme dev 2 安裝chalk主題 npm install element theme chalk d 3.初始化變數檔案 主題生成工具安裝成功後，如果全域性安裝可以在命令列裡通過 et 呼叫工...

關於Flutter主題色

provider 跨元件狀態共享 為flutter定義主題色提供了方法。了解主題色，首先需要知道flutter定義主題的方法 我們可以在main.dart 內使用 初始化路由 initialroute 定義路由 ongenerateroute ongenerateroute,測試書籤 debugsh...