5 steps to change antd theme on runtime using create-react-app
Tags: antd, theming, antdthemewebpackplugin
Published: 2020-10-30 09:20:01


Before we start, install [antd](https://github.com/ant-design/ant-design/) on your app (create-react-app) and add some [layout](https://ant.design/components/layout/), [components](https://ant.design/components/overview/) and toggle switch to it. We will also use `antd.css` for the default styling of components but we will remove it later and use `less` instead.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ypqov3q71wnitiqa1mxg.png)

# Step 1 - Install packages needed

1. react-app-rewired
2. customize-cra
3. babel-plugin-import
4. less
5. less-loader
6. antd-theme-webpack-plugin

```
npm install react-app-rewired customize-cra babel-plugin-import less less-loader antd-theme-webpack-plugin  --save-dev
```
explanation:

- **react-app-rewired**: tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts.
- **customize-cra**: we need customize-cra along with react-app-rewired due to new [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) issue.
- **babel-plugin-import**: for importing components on demand.
- **less**: default development language for styling in antd.
- **less-loader**: compiler for translating less into css.
- **antd-theme-webpack-plugin**: a webpack plugin to generate color specific less/css and inject into your index.html file so that you can change Ant Design specific color theme in browser.

# Step 2 - Create vars.less file

Create a `vars.less` file somewhere inside the src folder and inside the file, import the default less that used by antd:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hgdaak2vhqsvdwfuhkat.png)

# Step 3 - Create config-overrides.js file 

On the root directory of your app (where package.json reside), create `config-overrides.js` file and add the following code:

{% gist https://gist.github.com/christianandrei/d5eef1c8fecd0d2d71b63aebd08931c7 %}

Some *options* explanation:

- **stylesDir**: path of the parent directory of vars.less file that you created on **Step 2**
- **varFile**: path of vars.less file that you created on **Step 2**
- **themeVariables**: listed values on this are the only less variables that you can modify on **Step 5**. [Here](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) (default less used by antd) are the list of variables that you can add to it.

Note: if you are using less-loader@5 please check [this](https://github.com/ant-design/ant-design/issues/23624#issuecomment-619548269)

# Step 4 - Modify package.json

On the `script` part of package.json, we will use `react-app-rewired` instead of `react-scripts`:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uhwwzhcr319dj481ocxv.png)

Note: Do NOT flip the call for the eject script.

You can now start your app:

```
npm start
```

#Step 5 - Modify less vars in javascript

If the app started without errors, then you are good to go to the final step.

Here is a sample code on how to modify a less variables:

```javascript
//less variables that will be used here must be declared in themeVariables on config-overrides.js
window.less
    .modifyVars({
        "@primary-color": "#52c41a"
     })
    .then(() => {
        //do other stuff here
     })
     .catch(error => {
         console.error(error);
     });
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/udsemug3ig5eyran6lju.gif)

You can now remove your import `antd.css`

**Live preview**: [https://antd-change-theme-color.netlify.app/](https://antd-change-theme-color.netlify.app/)
**Code**: [https://github.com/christianandrei/antd-change-theme-color](https://github.com/christianandrei/antd-change-theme-color)

Happy coding!

# SOON: Antd Darkmode Tutorial!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ujqas16de0pz8xnn67dy.gif)

stay tuned!