antd在线换肤定制功能

最近react项目，用的antd框架，然后看见他的antdPro例子里面有个定制功能很帅，老大说做，那就做吧，鼓捣了一晚终于实现了。

css换肤

less换肤

步骤

这里我的项目是在自己写的的基础上做修改的，如果你用的create-react-app或者其他的脚手架可能会有相应修改。
安装cnpm i antd-theme-generator --save
index.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" 
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
</body>

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保存，这就不多说了

antd在线换肤定制功能

css换肤

less换肤

步骤

原理

其他

本地保存

最后