It's not work!

[hankaibo]

{
  "name": "xxx",
  "version": "0.0.1",
  "scripts": {
    "postinstall": "umi g tmp",
    "analyze": "cross-env ANALYZE=1 umi build",
    "build": "npm run color && umi build",
    "color": "node color.js",
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lint:prettier": "prettier --check \"**/*\" --end-of-line auto",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx --format=pretty ./src",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "prettier": "prettier -c --write \"**/*\"",
    "start": "umi dev",
    "dev": "npm run start:dev",
    "pre": "npm run start:pre",
    "start:dev": "npm run color && cross-env PORT=9000 REACT_APP_ENV=dev MOCK=none UMI_UI=none umi dev",
    "start:pre": "cross-env PORT=9000 REACT_APP_ENV=pre MOCK=none UMI_UI=none umi dev"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,less,md,json}": [
      "prettier --write"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "dependencies": {
    "@ant-design/icons": "^4.1.0",
    "@ant-design/pro-layout": "^5.0.12",
    "antd": "4.2.5",
    "antd-img-crop": "^3.2.0",
    "antd-theme-generator": "^1.2.3",
    "classnames": "^2.2.6",
    "intro.js": "^2.9.3",
    "intro.js-react": "^0.2.0",
    "lodash.isequal": "^4.5.0",
    "moment": "^2.26.0",
    "omit.js": "^1.0.2",
    "path-to-regexp": "^6.1.0",
    "prop-types": "^15.7.2",
    "qs": "^6.9.4",
    "react": "^16.13.1",
    "react-color": "^2.18.1",
    "react-dom": "^16.13.1",
    "react-helmet-async": "^1.0.6",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "umi": "^3.2.2",
    "umi-request": "^1.3.3",
    "use-merge-value": "^1.0.1"
  },
  "devDependencies": {
    "@umijs/fabric": "^2.0.8",
    "@umijs/preset-ant-design-pro": "^1.2.2",
    "@umijs/preset-react": "^1.5.5",
    "@umijs/preset-ui": "^2.1.14",
    "chalk": "^4.0.0",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.6",
    "mockjs": "^1.1.0",
    "prettier": "^2.0.5",
    "stylelint": "^13.5.0"
  },
  "engines": {
    "node": ">=10.0.0"
  },
  "checkFiles": [
    "src/**/*.js*",
    "src/**/*.less",
    "config/**/*.js*",
    "scripts/**/*.js"
  ]
}

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/variables.less'),
  themeVariables: [
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background',
    '@btn-primary-bg',
    '@layout-header-background',
    '@border-color-base',
    '@white'
  ],
  indexFileName: 'index.html',
  outputFilePath: path.join(__dirname, './public/color.less'),
  customColorRegexArray: [/^fade\(.*\)$/]
};

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

variables.less

// This file will contain all varibales, our custom varibales and
//those from Ant Design which we want to override.
@import '~antd/es/style/themes/default.less';

:root {
  --PC: @primary-color; //color.less中加入css原生变量：--PC
}

@secondry-color: #dddddd;
@primary-color: #00375B;
@text-color: #000000;
@text-color-secondary: #eb2f96;
// @heading-color: #ccccdd;
@secondary-color: fade(@primary-color, 20%);
@layout-header-background: #9e8989;
@btn-primary-bg: #397dcc;
@bg-color: #dddddd;
@border-color-base: #ff0000;
@white: #eeeeee;

But, the color.less file it generates is a literal not a variable.

.ant-btn-primary {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}

I hop it looks like

.ant-btn-primary {
  color: #fff;
  background-color: @primary-color;
  border-color: @primary-color;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}

This is my index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>My Ant Design Pro</title>
    <link rel="icon" href="/favicon.png" type="image/x-icon" />
    <link rel="stylesheet/less" type="text/css" href="/color.less" />
    <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>
  </head>
  <body>
    <noscript>Sorry, we need js to run correctly!</noscript>
    <div id="root">
      <style>
        html,
        body,
        #root {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        .page-loading-warp {
          padding: 98px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .ant-spin {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          color: rgba(0, 0, 0, 0.65);
          font-size: 14px;
          font-variant: tabular-nums;
          line-height: 1.5;
          list-style: none;
          -webkit-font-feature-settings: 'tnum';
          font-feature-settings: 'tnum';
          position: absolute;
          display: none;
          color: #1890ff;
          text-align: center;
          vertical-align: middle;
          opacity: 0;
          -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
            -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        }

        .ant-spin-spinning {
          position: static;
          display: inline-block;
          opacity: 1;
        }

        .ant-spin-dot {
          position: relative;
          display: inline-block;
          font-size: 20px;
          width: 20px;
          height: 20px;
        }

        .ant-spin-dot-item {
          position: absolute;
          display: block;
          width: 9px;
          height: 9px;
          background-color: #1890ff;
          border-radius: 100%;
          -webkit-transform: scale(0.75);
          -ms-transform: scale(0.75);
          transform: scale(0.75);
          -webkit-transform-origin: 50% 50%;
          -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          opacity: 0.3;
          -webkit-animation: antSpinMove 1s infinite linear alternate;
          animation: antSpinMove 1s infinite linear alternate;
        }

        .ant-spin-dot-item:nth-child(1) {
          top: 0;
          left: 0;
        }

        .ant-spin-dot-item:nth-child(2) {
          top: 0;
          right: 0;
          -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
        }

        .ant-spin-dot-item:nth-child(3) {
          right: 0;
          bottom: 0;
          -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
        }

        .ant-spin-dot-item:nth-child(4) {
          bottom: 0;
          left: 0;
          -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
        }

        .ant-spin-dot-spin {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-animation: antRotate 1.2s infinite linear;
          animation: antRotate 1.2s infinite linear;
        }

        .ant-spin-lg .ant-spin-dot {
          font-size: 32px;
          width: 32px;
          height: 32px;
        }

        .ant-spin-lg .ant-spin-dot i {
          width: 14px;
          height: 14px;
        }

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          .ant-spin-blur {
            background: #fff;
            opacity: 0.5;
          }
        }

        @-webkit-keyframes antSpinMove {
          to {
            opacity: 1;
          }
        }

        @keyframes antSpinMove {
          to {
            opacity: 1;
          }
        }

        @-webkit-keyframes antRotate {
          to {
            -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
          }
        }

        @keyframes antRotate {
          to {
            -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
          }
        }
      </style>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          min-height: 420px;
          height: 100%;
        "
      >
        <div class="page-loading-warp">
          <div class="ant-spin ant-spin-lg ant-spin-spinning">
            <span class="ant-spin-dot ant-spin-dot-spin">
              <i class="ant-spin-dot-item"></i>
              <i class="ant-spin-dot-item"></i>
              <i class="ant-spin-dot-item"></i>
              <i class="ant-spin-dot-item"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Where did I use it wrong?

[mzohaibqc]

Create a sample project on github and reproduce this. I'll look into that and will fix this issue

[hankaibo]

This is my code. https://github.com/hankaibo/myantdpro/tree/feature/dynamic-theme I know it is a bit big.

[mzohaibqc]

In you configurations, you are using variables.less where as it is vars.less in you styles directory. This is very important to use the right file containing your theme variables. Also, use src directory as your styles directory since some styles are in component folder as well.

const options = {
  stylesDir: path.join(__dirname, './src'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/styles/vars.less'),
  themeVariables: [
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background',
    '@btn-primary-bg',
    '@layout-header-background',
    '@border-color-base',
    '@white'
  ],
  indexFileName: 'index.html',
  outputFilePath: path.join(__dirname, './public/color.less'),
  customColorRegexArray: [/^fade\(.*\)$/]
};

Look at this sample color.js and follow this https://github.com/mzohaibqc/antd-theme-generator/blob/master/examples/customize-cra/color.js

You can make some changes to remove light and dark theme changes

const path = require('path');
const fs = require('fs');
const { generateTheme, getLessVars } = require('antd-theme-generator');

const themeVariables = getLessVars(path.join(__dirname, './src/styles/vars.less'))

const options = {
  stylesDir: path.join(__dirname, './src'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/styles/vars.less'),
  mainLessFile: path.join(__dirname, './src/styles/main.less'),
  themeVariables: Object.keys(themeVariables),
  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);
  });

[hankaibo]

Thanks for your reply. I don't know why it is. When I execute node coler.js, I received this error: "error evaluating function fade: Argument cannot be evaluated to a color". version: 1.2.3.

I don't know what to do, because there is an error it did not generate color.less file. then, I use verison: 1.1.9，it's ok!!!

now, I use it at 1.1.9.

[hankaibo]

hi, 1.2.4 isn't work. I use your example/create-react-app. Sometimes it is good, But the generated color.less file does not contain my custom file.

[mzohaibqc]

@hankaibo I would strongly suggest that use examples/customise-cra sample code. That is up to date and other examples are bit outdated and I could not spare much time to update all examples.

[hankaibo]

Sorry, because I used css modules but antd-theme-generator isn't supported. 😭😭😭

[mzohaibqc]

@hankaibo Thanks for reply.

So a note for others:

css-moduels are not supported

[rongwei-alisa]

Sorry, because I used css modules but antd-theme-generator isn't supported. 😭😭😭

How did you solve it? I used css modules too