Customize/Override Ant Design theme in Laravel ReactJS

Here’s a quick guide for overriding Ant Design theme variables (colors) in a ReactJS project using Laravel Mix. I will assume that you already have configured a ReactJS project with Laravel Mix. If not, than you can easily find this documentation: https://laravel.com/docs/master/mix

Inspired by AntD documentation here: https://ant.design/docs/react/customize-theme I’ve managed to make it work in Laravel:

Let’s start with dependencies

First, you have to run the following command

npm install antd 
npm install --save-dev  css-loader  less  less-loader  style-loader

Configuring Laravel Mix

Next, in your project root shall be a file named: webpack.mix.js. At the end of it you shall have something like this:

 
 mix.react('resources/assets/js/app.js', 'public/js')
    .less('resources/assets/less/app.less', 'public/css',
        {
            modifyVars: {
                'primary-color': '#0BD37E',
            },
            javascriptEnabled: true,
        });

Make sure you have app.less created in the desired location.

At the top of that file you should inport the default antd styles using: @import "~antd/dist/antd.less";

Rest of your application styling should go below that.

As you can in modifyVars object, we have overwritten the value for primary color.

You can find all other variables with their default values here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

Wrap in up

Hope these information saved you some time.

If you’d like to know more details just let me know in comments section.

Leave a comment

Your email address will not be published. Required fields are marked *