Antd custom theme generator
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 variable, to achive this you have multiple ways (check the doc here). The problem is that you don't have a simple way to create a static
css file with zero configuration.
This project was created with
Antd Design v4.6.6 and aims to simplify the customization of your theme if you don't want to install dependencies, configurate things like
less or eject your React project.
Generate custom theme styles
Create your own custom theme with the variables that you want to override, in a file called
To generate the
cssfile with your custom theme, run this command:
Option A: Without installing this plugin
$ npx @emeks/antd-custom-theme-generator output > ./custom-theme.css
Option B: Installing the package as a dev dependency
$ npm i -E --save-dev @emeks/antd-custom-theme-generator
Then generates your custom theme:
$ generate-theme output > ./custom-theme.css
Replace the import of
antd/dist/antd.cssin your project, with the output file (
custom-theme.css) generated by this plugin.
|verbose||Print more info for debugging|
|customThemeFilePath||./custom-theme.less||Path of the less file with the variables your want to override|
|generatedThemeFilePath||./custom-theme.css||Output path where the script give you the css file with your new theme|
|antdLibraryPath||./node_modules/antd||Path of the antd library|
|theme||default||Antd theme you want to override (e.g.
- The order of the options is important.$ generate-theme [verbose] [customThemeFilePath] [generatedThemeFilePath] [antdLibraryPath] [theme]
- Notice that all these paths must be defined relative to your project root path.
Generate dark theme
$ npx @emeks/antd-custom-theme-generator ./custom-theme.less ./custom-theme.css ./node_modules/antd dark
Generate default theme with diferents paths
$ npx @emeks/antd-custom-theme-generator ./styles/custom-theme.less ./styles/custom-theme.css
Q1: Which variables can I override?
The variables that are exposed by antd in this file: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
Q2: Should I run this command every time i change my
Yes, we don't provide hot-reload yet.
Use the package locally:
$ npm link
Then in another project with antd already installed and with a
custom-theme.less file created, execute:
- [ ] Add hot-reload generation