@pengcheng789/antd-custom-theme-generator v0.1.8

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

1. Create your own custom theme with the variables that you want to override, in a file called ./custom-theme.less.

2. 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

3. 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 as dark or 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 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