@pengcheng789/antd-custom-theme-generator
v0.1.8
Published
A simple way to create an antd theme css file with zero configuration.
Downloads
4
Readme
Antd custom theme generator
Forked from emeks-studio/antd-custom-theme-generator.
Change: Modify the cmd path for lessc
from __dirname
to process.cwd()
.
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.
Usage
Generate custom theme styles
Create your own custom theme with the variables that you want to override, in a file called
./custom-theme.less
.Run this command to obtain a
css
file with your custom theme:$ npm -i -E --save-dev @pengcheng789/antd-custom-theme-generator
Then generates your custom theme:
$ generate-theme output > ./custom-theme.css
Replace the import of
antd/dist/antd.css
in your project, with the output file (custom-theme.css
) generated by this plugin.
FAQ
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 asdark
orcompact
(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 custom-theme.less
file?
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]
Default values:
- 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.
Development
Use the package locally:
$ npm link
Then in another project with antd already installed and with a custom-theme.less
file created, execute:
$ generate-theme
TODO List:
- [ ] Add hot-reload generation