A simple way to create an antd theme css file with zero configuration.
A simple way to create an antd theme css file with zero configuration.
Ant Design provides plenty of UI components, styled with less.
You can customize the default theme modifying less variables (check their doc for multiple ways to achieve this), but the main issue being that you don't have a simple way to create a static .css
file with zero configuration.
This package was created with Antd Design v4.6.6
and aims to ease the theme's customization process without having to install more dependencies yourself, set up less or eject your React project.
Define your custom theme creating a .less
file overriding Antd's variables (by default: ./custom-theme.less
).
@primary-color: #9063cd;
@success-color: #a8d3c4;
Generate custom theme's .css
file.
$ npx @emeks/antd-custom-theme-generator
output > ./custom-theme.css
$ npm i -E --save-dev @emeks/antd-custom-theme-generator
Then generating your theme:
$ generate-theme
default output > ./custom-theme.css
Replace "antd/dist/antd.css"
import in your project, with the output file of your custom theme generated by this script (by default: ./custom-theme.css
).
Name | Default | Description |
---|---|---|
--verbose or -v |
Prints a little bit more info for debugging purposes | |
--watch or -w |
Keeps script running, recompile on <customThemeFilePath> change |
|
--antd |
./node_modules/antd | Path to the antd library directory |
--theme |
default | Antd theme you want to use as base (e.g. dark or compact ) - Check available options |
<customThemeFilePath> |
./custom-theme.less | Path to the custom .less file with Antd variables overriden |
<generatedThemeFilePath> |
./custom-theme.css | Output Path to the compiled .css file containing your new theme |
Notes:
The order of paths is important.
$ generate-theme [--verbose] [--watch] [--antd <dir>] [--theme <theme>] [<customThemeFilePath>] [<generatedThemeFilePath>]
$ npx @emeks/antd-custom-theme-generator --theme dark
$ npx @emeks/antd-custom-theme-generator ./styles/custom-theme.less ./styles/custom-theme.css
Q1: Which variables can I override?
You may override any variable exposed by Antd in this file.
Q2: Should I run this command every time I change my
custom-theme.less
file?
No, you could pass the -w
argument to let the script observe <customThemeFilePath>
file and recompile it if it changes.
$ npm link
<customThemeFilePath>
file created as well):
$ generate-theme