1.2.0 • Published 4 years ago
antd-theme-changer v1.2.0
antd-theme-changer
用于动态修改less变量 实现动态切换antd主题颜色，其他插件支持度待开发。
原理:
使用less.js内置方法 window.less.modifyVars({themeVariables})动态修改less变量色值以改变界面显示颜色
Install
npm install -D antd-theme-changer
webpack.config.js
const path = require('path');
const antdThemeChanger = require("antd-theme-changer");
const options = {
stylesDir: path.join(__dirname, './src'),
antDir: path.join(__dirname, './node_modules/antd'),
varFile: path.join(__dirname, './src/styles/vars.less'),
indexFileName: 'index.html',
generateOnce: false, // generate color.less on each compilation
};Add this plugin in plugins array.
| Property | Type | Default | Descript |
|---|---|---|---|
| antDir | string | - | This is path to antd directory in your node_modules |
| stylesDir | string | - | This is path to your custom styles root directory, all files with .less extension in this folder and nested folders will be processed |
| varFile | string | - | Path to your theme related variables file |
| themeVariables | array | ...all | List of variables that you want to dynamically change |
| indexFileName | string | index.html | File name of your main html file, in most cases it is index.html which is default |
| lessUrl | string | https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js | less.js cdn or file path |
| publicPath | string | '' | This string will be prepended to /color.less in index.html file in case |
| generateOnce | boolean | false | Everytime webpack will build new code due to some code changes in development, this plugin will run again unless you specify this flag as true which will just compile your styles once |
| customColorRegexArray | array | 'color', 'lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'hsv', 'tint', 'shade', 'greyscale', 'multiply', 'contrast', 'screen', 'overlay'.map(name => new RegExp(${name}\(.*\)))] | This array is to provide regex which will match your color value, most of the time you don't need this |
import darkVars from "antd-theme-changer/src/dark.json"; // 暗黑主题
import lightVars from "antd-theme-changer/src/light.json"; // 明亮主题
let vars = darkVars;
window.less.modifyVars(vars) // 切换主题方法
.then(() => {
// message.success(`Theme updated successfully`);
this.setState({ vars, themeName: key });
this.setState({ vars });
localStorage.setItem("app-theme", JSON.stringify(vars));
localStorage.setItem("theme-name", key);
})
.catch(error => {
message.error(`切换主题失败！`);
});