How to Customize Ant Design Theme in a Next.js App

Introduction

In a previous article I wrote a guide on how to add the Ant Design UI component library to your Next.js project. In this tutorial, you'll learn how to customize the default ant design theme to your own theme in just a few steps.

Prerequisite

Before we proceed you need to ensure you have a Next project with Ant Design installed. If you need a guide you can read this article.

Step 1 - Install next-plugin-antd-less and babel-plugin-import

Navigate to your project directory and run the following commands:

npm install next-plugin-antd-less
npm install -D babel-plugin-import

Step 2 - Import and Use the Plugin

Open your next.config.js and add the following configuration:

const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // optional: you can modify antd less variables directly here
  modifyVars: { '@primary-color': '#04f' },
  // Or better still you can specify a path to a file 
  lessVarsFilePath: './styles/variables.less',
  // optional
  lessVarsFilePathAppendToEndOfContent: false,
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {},

  // Other Config Here...

  webpack(config) {
    return config;
  },

  // ONLY for Next.js 10, if you use Next.js 11, delete this block
  future: {
    webpack5: true,
  },
});

Step 3 - Configure .babelrc.js

In your project's root, add or modify the .babelrc.js file with the following config:

module.exports = {
  presets: [['next/babel']],
  plugins: [['import', { libraryName: 'antd', style: true }]],
};

Step 4 - Overwrite antd less variable

1. Remember in step four we specified a path to a less file:

const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // optional: you can modify antd less variables directly here
  modifyVars: { '@primary-color': '#04f' },
  // Or better still you can specify a path to a file 
  lessVarsFilePath: './styles/variables.less',
  // optional
  lessVarsFilePathAppendToEndOfContent: false,
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {},

  // rest of code

Create that less file in the path and file name you specified in your config.

2. Import antd default styles in the file. You only need to import antd styles once in your project. So make sure it's not imported elsewhere.

  @import '~antd/lib/style/themes/default.less';
  @import '~antd/dist/antd.less'; // Import Ant Design styles

3. Override Ant Design styles. For reference, these are the default variables.

  @import '~antd/lib/style/themes/default.less';
  @import '~antd/dist/antd.less'; // Import Ant Design styles

  @primary-color: #04f; // change antd primary-color

Step 5 - Import less file

Navigate to the _app.js file and add the variables.less file you created in Step 4. Make sure the default antd styles are deleted because we already included it in the variables.less file:

require("../styles/variables.less");

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Conclusion

If you followed the steps right, you should now be able to customize the default Ant Design UI library theme in your Next.js project. If you encounter any difficulty, you can inpect the source code for this tutorial.

I hope this articled helped you. If it was helpful, let me know on Twitter. You can also check out other cool articles and tutorials I've written or subscribe to my newsletter for awesome code updates.