nz zorro 主題切換 動態

2021-10-11 02:00:14 字數 851 閱讀 5483

npm i less -d less-plugin-clean-css -d
以黑暗主題為例,使用less編譯應用的樣式入口檔案,並且在modifyvars引數中替換樣式變數,並輸出到目標位置。

在目錄下建立theme.js檔案,然後拷貝如下**,**中的path需要修改為,專案的路徑,可以是相對路徑,不過我用的絕對路徑,主要是圖省事。 在命令列輸入: node .\theme.js,執行即可生成暗黑模式的css檔案。

const less = require('less');

const lessplugincleancss = require('less-plugin-clean-css');

const fs = require('fs');

const darkthemevars = require('ng-zorro-antd/dark-theme');​​

function gen(type)

)],  modifyvars:

}).then(data => ).catch(e => );}​

promise.all([gen("dark"),gen("compact")]).then(()=>);

動態建立link標籤或者button按鈕,呼叫如下**,將樣式檔案 'assets/themes/style.dark.css' 動態載入在應用中,反之移除。

changetheme(theme: 'default' | 'dark'): void  else 

}}

easyui動態切換主題

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

前端 easyui動態切換主題

引入easyui的jsp頁面 從cookies獲取 主題設定 string themename default cookie cookies request.getcookies 以下 根據個人情況自己寫,原理就是找到指定名稱的cookie就將此名稱的cookie值賦值賦值給定義的變數 if coo...

ECharts實現動態切換主題樣式

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