DEV Community

Arnaldo Gabriel
Arnaldo Gabriel

Posted on • Updated on

Simple way of modifying Ant Design default theme

Note to self

Start by installing lessc.

npm install less -g
Enter fullscreen mode Exit fullscreen mode

Move into the 'dist' directory inside the antd package.

Create a file with the following content and name it 'my-theme.less'

@import "./antd.less";   // Import Ant Design styles by less entry

@primary-color: #d228e9;                         // primary color for all components
@link-color: #1890ff;                            // link color
@success-color: #52c41a;                         // success state color
@warning-color: #faad14;                         // warning state color
@error-color: #f5222d;                           // error state color
@font-size-base: 40px;                           // major text font size
@heading-color: rgba(0, 0, 0, .85);              // heading text color
@text-color: rgba(0, 0, 0, .65);                 // major text color
@text-color-secondary : rgba(0, 0, 0, .45);      // secondary text color
@disabled-color : rgba(0, 0, 0, .25);            // disable state color
@border-radius-base: 4px;                        // major border radius
@border-color-base: #d9d9d9;                     // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // major shadow for layers
Enter fullscreen mode Exit fullscreen mode

Execute the following command in the terminal:

lessc --js my-theme.less result.css
Enter fullscreen mode Exit fullscreen mode

Example to compile it inside the project styles folder:

lessc --js my-theme.less ../../../src/style/custom-antd.css
Enter fullscreen mode Exit fullscreen mode

Now import the resulting CSS into your project.

Top comments (14)

nazimaitali profile image
Nazim Aitali

where the problem may well come from ... HELP ME PLEASE
$ lessc --js my-theme.less result.css
ParseError: Unrecognized input. Possibly missing '(' in mixin call. in C:\Users\Nazim\Desktop\React-testing\hospital-app\node_modules\antd\lib\alert\style\index.less on line 7, column 19:
6 .@{alert-prefix-cls} {
7 .reset-component;

gersonflayer profile image

I have the same problem, do you have a solution? ):

aderchox profile image

Is it possible to change the value of an Ant design theme color variable without removing the last value? When I Google this people recommend solutions that completely replaces a new color for primary color, I only want to change primary color for dark mode, is it possible?

ochukodotspace profile image

Hey so I have been looking for a solution like this for so long (over a year). Over time I have become accustomed to writing CSS to override each antd class of the component I needed to change (I know it's dumb). This has completely eliminated that process and I'm so grateful for this article. It's clear and simple. Thank you.

motioncreative profile image
motioncreative • Edited

Any ideas why this was working for me before and now when I try it in a new project, it doesn't work? Any tips for troubleshooting? I was able to install everything correctly and run the command without error and it generates the correct file. I import it, but it doesn't change anything!

agmm profile image
Arnaldo Gabriel • Edited

It has been a while since the last time that I used Antd, maybe they changed the name of some of the classes?

jsalaz1989 profile image
Jaime Salazar Lahera

This is great. I was fearing having to integrate nextjs with antd and this seems to do the trick in a pretty simple manner.

lostintheway profile image

in which directory should I run : lessc --js my-theme.less result.css

agmm profile image
Arnaldo Gabriel

"Move into the 'dist' directory inside the antd package"

kvintus profile image
Jákob Rolík

Amazing idea thank you. Saves a lot of time getting less to work when you actually don't even need it because all you need is to change one var. Thank you love it.

patomen1 profile image

hello when installing I get that error

npm ERR! 404 Not Found: lessc@latest

agmm profile image
Arnaldo Gabriel

My bad, it should have been: npm install less -g

shahriarshakil profile image
Mr.Shahriar Shakil

@import "./antd.less" wasn't found in antd dist folder .so its fail to compile

renlikin profile image

Just replace the double-quote for single-quote.
@import './antd.less'