react项目实现antd动态主题切换-CFANZ编程社区

1、安装antd-theme-generator

yarn add antd-theme-generator

2、项目scripts文件夹下新建generateColorLess.js

// generateColorLess.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"
    ],
    outputFilePath: path.join(__dirname, "../public/color.less")
};

generateTheme(options)
    .then(less => {
        console.log("Theme generated successfully");
    })
    .catch(error => {
        console.log("Error", error);
    });

stylesDir：用来定制主题的less文件的路径；
antDir：ant design依赖的路径；
varFile：要动态切换的less变量所在的文件的路径；
mainLessFile：自己编写的样式文件，也就是index.less文件的路径，要在这个文件中编写需要动态切换的样式，并将variables.less中的less变量应用到自己编写的样式中；
themeVariables：数组指定所有我们自定义的需要切换的样式变量。
3、在 src 下创建文件 src/styles/variables.less 和 src/styles/index.less（用于定义全局样式）

// variables.less
@import "~antd/lib/style/themes/default.less";

// 下方变量覆盖antd默认变量
@primary-color: #1890ff;


// index.less
.defaultColor {
    color: @primary-color;
}

在需要应用@primary-color颜色的HTML元素上添加defaultColor类名，即可动态改变该HTML元素的颜色。
4、修改 public/index.html

<body>
  <link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/color.less" />
    <script>
      window.less = {
        async: false,
        env: 'development',
        javascriptEnabled: true
      };
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

</body>

5、在package.json文件中项目启动（start）和打包（build）script中添加

node ./scripts/generateColorLess.js

6、定义切换主题的方法，调用该方法即可切换主题色

import { message } from "antd";

export const setThemeColor = (theme: string) => {
    if (theme === 'default') {
        window.less.modifyVars({
            '@primary-color': 'blue',
            '@border-color-base': '#E9EEF7',
            '@layout-body-background': '#f0f2f5',
            '@layout-header-background': '#fffffe',
            '@component-background': '#fffffe',
            '@text-color': 'rgb(255, 255, 255)',
        }).catch((error: any) => {
            message.error(`Failed to update theme`);
        });
    } else {
        window.less.modifyVars({
            '@primary-color': 'red',
            '@border-color-base': '#303030',
            '@layout-body-background': '#000001',
            '@layout-header-background': '#1f1f1f',
            '@component-background': '#141414',
            '@text-color': 'rgb(0, 0, 0)',
        }).catch((error: any) => {
            message.error(`Failed to update theme`);
        });
    }
}

7、调用切换主题

<Button type="primary" 
   onClick={() => {
     console.log("change");
     const finalColor = btnColor === 'default' ? 'dark' : 'default';
     setBtnColor(finalColor)
     setThemeColor(finalColor)
   }}
 >
   changeTheme
</Button>