Ant Design: How are they changing color on run time and so quick?

Question

I am using Ant Design in a React project. Ant provides styles in less which provides a way to customize theme and then build the code (less to css) but on their website (https://ant.design/docs/react/introduce) at the bottom they have a color picker which let you change the @primary-color instantly in over all places. No api call is being made and I tried to compile Ant Design less file i.e. node_modules/antd/dist/antd.less in browser but it takes few seconds (5-10) to compile. I also tried to do this using server side compilation by sending variables in POST request and then inserting returned css in DOM but that is not good.

I need help to achieve this functionality. Thanks in advance.

Answer 1

My previous answer got deleted so adding some information here.

If you are using Ant Design then I've created a npm package called antd-theme-generator (or antd-theme-webpack-plugin if you are using webpack).

It allows you to specify which variables you want to dynamically update within browser and update color specific theme.

More info here https://github.com/mzohaibqc/antd-theme-generator

Here is demo https://mzohaibqc.github.io/antd-theme-generator/

const { generateTheme } = require('antd-theme-generator');

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed
  varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file
  themeVariables: ['@primary-color'],
  outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles
  customColorRegexArray: [/^fade\(.*\)$/], // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives.
}

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