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)

Collapse
 
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;

Collapse
 
gersonflayer profile image
GersonFlayer

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

Collapse
 
aderchox profile image
aderchox

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?

Collapse
 
deltanboi profile image
Pedro Ogheneochuko

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.

Collapse
 
motioncreative profile image
motioncreative • Edited on

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!

Collapse
 
agmm profile image
Arnaldo Gabriel Author • Edited on

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

Collapse
 
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.

Collapse
 
lostintheway profile image
lostintheway

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

Collapse
 
agmm profile image
Arnaldo Gabriel Author

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

Collapse
 
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.

Collapse
 
patomen1 profile image
patomen1

hello when installing I get that error

npm ERR! 404 Not Found: lessc@latest

Collapse
 
agmm profile image
Arnaldo Gabriel Author

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

Collapse
 
shahriarshakil profile image
Mr.Shahriar Shakil

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

Collapse
 
renlikin profile image
Renlikin

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

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!