Web 站點動態主題切換實現

2022-09-10 01:45:15 字數 853 閱讀 9371

最近調研 web 站點動態主題切換的實現,記錄如下

站點維護多套主題,動態替換不同主題檔案

在客戶端載入 less 通過的 less 的 modifyvars 在瀏覽器中動態修改主題

在入口 index.html 引入 less.min.js

在入口 index.html 引入主題色檔案

theme.less

@primarycolor: red;

.page

動態修改主題

handlecolorchange (color) )

.then(() => );

};

demo:

對於現代瀏覽器,css 變數是一種更廉價的動態更改主題的方式(不支援 ie 11)

​定義主題變數(注意全域性變數定義在 根元素上)

:root 

.page

動態更改主題

// 替換變數值

document.body.style.setproperty("--primarycolor", "blue");

// or

// 動態載入不同主題變數

可以看出,上述的思想都是一致的,要麼替換檔案要麼修改變數。巧的是,antd 在最新的版本中也支援了動態主題,其思路是直接將 less 中的變數 轉化為 css variables 掛在全域性。可以學習下

出處: 站點動態主題切換實現/

ECharts實現動態切換主題樣式

echarts4 開始,除了一貫的預設主題外,新內建了兩套主題,分別為 light 和 dark 使用方法如下 var chart echarts.init dom,light 主題可以在 主題編輯器裡面找到,也可以自己定義主題。如果主題儲存為 json 檔案,那麼可以自行載入和註冊 參考文件 動態...

easyui動態切換主題

easyui換主題,並記錄在cookie 首先將easyui的樣式檔案加入乙個id,這裡命名為easyuitheme,然後在樣式檔案下面加入乙個js檔案 changeeasyuitheme.js檔案的內容是 function changethemefun themename katex parse ...

nz zorro 主題切換 動態

npm i less d less plugin clean css d以黑暗主題為例,使用less編譯應用的樣式入口檔案,並且在modifyvars引數中替換樣式變數,並輸出到目標位置。在目錄下建立theme.js檔案,然後拷貝如下 中的path需要修改為,專案的路徑,可以是相對路徑,不過我用的絕...