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 檔案,那麼可以自行載入和註冊 參考文件 動態...