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:
First, you have to run the following command
npm install antd npm install --save-dev css-loader less less-loader style-loader
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
Hope these information saved you some time.
If you’d like to know more details just let me know in comments section.