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 works 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
Run this command to obtain a
cssfile with your custom theme:
Option A: Without installing this plugin$ npx @emeks/antd-custom-theme-generator generate-themeoutput > ./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-themeoutput > ./custom-theme.css
Replace the import of
antd/dist/antd.cssin your project, with the output file (
custom-theme.css) generated by this plugin.
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
Also, you could use
[theme]parameter in order to target to a different theme such as
compact(To check all available options, please inspect this folder: https://github.com/ant-design/ant-design/tree/master/components/style/themes).
Q2: Should I run this command every time i change my
Yes, we don't provide hot-reload yet.
Q3: Is there a way of changing command defaults?
Sure, by using the command like this way:$ generate-theme [verbose] [customThemeFilePath] [generatedThemeFilePath] [antdLibraryPath]
- verbose = ""
- customThemeFilePath = "./custom-theme.less"
- generatedThemeFilePath = "./custom-theme.css"
- antdLibraryPath = "./node_modules/antd"
- theme = "default"
^ Notice that all these paths must be defined relative to your project root path.
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