Note to self
Start by installing lessc.
npm install less -g
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
Execute the following command in the terminal:
lessc --js my-theme.less result.css
Example to compile it inside the project styles folder:
lessc --js my-theme.less ../../../src/style/custom-antd.css
Now import the resulting CSS into your project.
Top comments (14)
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;
I have the same problem, do you have a solution? ):
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?
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.
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!
It has been a while since the last time that I used Antd, maybe they changed the name of some of the classes?
This is great. I was fearing having to integrate nextjs with antd and this seems to do the trick in a pretty simple manner.
in which directory should I run : lessc --js my-theme.less result.css
"Move into the 'dist' directory inside the antd package"
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.
hello when installing I get that error
npm ERR! 404 Not Found: lessc@latest
My bad, it should have been:
npm install less -g@import "./antd.less" wasn't found in antd dist folder .so its fail to compile
Just replace the double-quote for single-quote.
@import './antd.less'