最近react项目，用的antd框架，然后看见他的antdPro例子里面有个定制功能很帅，老大说做，那就做吧，鼓捣了一晚终于实现了。
css换肤
入行前端的时候经常看鱼哥(张鑫旭)的博客，记得看过 这篇 ，当时很惊叹，原理其实很简单，就是我们最能想到的方式，多个css，然后用JS替换从而达到换肤效果。但是这个有局限性，比如我们用的是antdUI库，我们不可能每个颜色都去搞个css吧。当时现在我们有less,sass，而且原生的css也有变量var了，所以新时代我们有新技术达到这个效果。
less换肤
其实antd官网是有 定制主题 的，但是是静态的，通过打包之前去设置一些config，less变量从而达到定制效果，但是这显然不是我们想要的==线上实时==换肤效果。
最初我的思路是用node去实时生成一个webpack.config.base的配置文件，但是这样只能在开发环境实现换肤，生成环境是没办法的。然后网上有人说，用less去生成多个css文件，这不又走了以前的老路吗。最后没办法我把antdPro的源码拿来看了下，终于找到了解决办法，antd-theme-generator
步骤
这里我的项目是在自己写的 webpack4-react脚手架 的基础上做修改的，如果你用的create-react-app或者其他的脚手架可能会有相应修改。
安装
cnpm i antd-theme-generator --saveindex.html
<body> <link rel="stylesheet/less" type="text/css" href="static/color.less" /> //主要是这个起作用 <script>
window.less = { async: false, env: 'production'
}; </script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<noscript>
You need to enable JavaScript to run this app. </noscript>
<div id="root"></div></body>根目录添加color.js
const path = require('path');const { generateTheme, getLessVars } = 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/vars.less'), //对应具体位置
mainLessFile: path.join(__dirname, './src/styles/main.less'), //对应具体位置
themeVariables: [ '@primary-color', '@secondary-color', '@text-color', '@text-color-secondary', '@heading-color', '@layout-body-background', '@btn-primary-bg', '@layout-header-background'
], indexFileName: 'index.html', outputFilePath: path.join(__dirname, './src/static/color.less'),
}
generateTheme(options).then(less => { console.log('Theme generated successfully');
})
.catch(error => { console.log('Error', error);
});src添加styles文件夹，里面有vars.less和main.less
//vars.less@import "~antd/lib/style/themes/default.less";@link-color: #00375B;@primary-color: #00375B;:root {
--PC: @primary-color; //color.less中加入css原生变量：--PC
}//main.less//可为空，只是为了不报错才引入package.json
//为了每次自动node color.js，所以scripts里面修改下"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "node color && webpack-dev-server --config webpack.config.dev.js",
"start": "npm run dev", "build": "node color && webpack --config webpack.config.prod.js"
},使用，启动后直接window.less.modifyVars就可以了
window.less
.modifyVars(
{ '@primary-color': '#ee5e7b', '@link-color': '#ee5e7b', '@btn-primary-bg': 'ee5e7b',
}
)
.then(() => { })
.catch(error => {
message.error(`Failed to update theme`);
});最后，打包后注意放入环境后打开，否则会报错。
原理
我们发现其实他生效主要就是靠color生成一个color.less文件，然后我打开color.less文件看了下，发现原来是利用的less可以写逻辑这个特性实现的，从而通过window.less.modifyVars去动态的改变less变量。
其他
现在antd的换肤问题解决了，但是我们自己的css样式怎么办呢，比如我有个标题想用主题色，我怎么去拿到这个颜色呢。
起初我是这样实现的vars.less增加
//vars.less
.primary-color{ color:@primary-color
}这样.primary-color就会打入生成的color.less里面，然后我们就可以用了，当时这样有些地方就不方便，比如box-shadow: 1px 1px 1px 1px #d23333;,我们怎么办，难道每次都要写在vars.less里面吗
所以这里我用了css的原生变量var
//vars.less:root {
--PC: @primary-color;
}然后就可以使用box-shadow: 1px 1px 1px 1px var(--PC);
本地保存
用户设置颜色后，可以用缓存或者localStorage保存，这就不多说了
作者：TaoLandd
链接：https://www.jianshu.com/p/b635211658c8
共同学习，写下你的评论
评论加载中...
作者其他优质文章
