Customizing Theme

Ant Design provides a possibility to customize theme using less and overriding built-in variables. You can also use these variables in your own code.

In order to do so, you will need to make some modifications to the generated app.

You will have to enable deprecated inline Javascript in less as Ant Design makes heavy use of it. Reasons for deprecation.

  • Install the required dependencies. Note that we are using react-app-rewired to modify the webpack config without having to eject.

    npm i react-app-rewired less less-loader customize-cra babel-plugin-import --save-dev

  • Create config-overrides.js file in the app root. The file shall look like this.

    const {addLessLoader, override, fixBabelImports} = require("customize-cra");
const path = require('path');
module.exports = override(
  fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      'overrideTheme': `true; @import "${path.resolve(__dirname, './src/theme.less')}";`,
    },
  }),
);

Now you can place your overrides in src/theme.less:

@primary-color: #1DA57A;

You can use Ant Design variables in your code like this:

@import "~antd/es/style/themes/default";
body {
  background: @list-header-background;
}

References: