antd动态主题；在线换肤
最简单的react+antd在线换肤功能
- 开始
- 下载插件
- 准备
- 根目录添加color.js
- src文件夹下添加styles/index.less+styles/variables.less
- index.html文件中加入全局less配置
- package.json文件修改命令
- 大功告成
开始
目前项目中有一个换肤的功能，在csdn苦苦搜寻许久没有找到合适的方案，可能是版本问题或是别的什么导致各种报错，最终在antd社区找到了一个可施行的方案，在此做下笔记
下载插件
yarn add antd-theme-generator
准备
根目录添加color.js
const path = require('path');
const { generateTheme } = require('antd-theme-generator');
const options = {
stylesDir: path.join(__dirname, './src/styles'),
antDir: path.join(__dirname, './node_modules/antd'),
varFile: path.join(__dirname, './src/styles/variables.less'),
mainLessFile: path.join(__dirname, './src/styles/index.less'),
themeVariables: [
//需要动态切换的主题变量
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background'
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './public/color.less') //页面引入的主题变量文件
};
generateTheme(options)
.then(less => {
console.log('Theme generated successfully');
})
.catch(error => {
console.log('Error', error);
});
src文件夹下添加styles/index.less+styles/variables.less
index.less文件为空
variables.less:
@import '~antd/lib/style/themes/default.less'; //引入antd的变量文件，实现变量的覆盖
@primary-color: '#202777';
@layout-header-padding: '0px';
:root {
--PC: @primary-color;
}
index.html文件中加入全局less配置
index.html 中加入全局 less 变量配置，从而使 less 的 modifyVars 方法可以全局使用，切换主题时覆盖 default.less 中的变量：
<body>
<link
rel="stylesheet/less"
type="text/css"
href="%PUBLIC_URL%/color.less"
rel="external nofollow"
/>
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"
></script>
<div id="root" style="height: 100%;"></div>
</body>
package.json文件修改命令
"scripts": {
"start": "node color && react-scripts start",
"build": "node color && react-scripts start",
"test": " node color && react-scripts start"
},
大功告成
这样就可以动态的修改了！
getTheme = color => {
window.less
.modifyVars({
'@primary-color': color,
'@layout-header-padding': '0px'
})
.then(() => {
consolr.log(color);
})
.catch(error => {
console.log(error);
});
};