最近調研 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需要修改為,專案的路徑,可以是相對路徑,不過我用的絕...