open-index/open-npm huggingface dataset:
npm package: @pengcheng789/antd-custom-theme-generator
Description: A simple way to create an antd theme css file with zero configuration.
Author: CAI Pengcheng
Latest version: 0.1.8

# Antd custom theme generator

Forked from [emeks-studio/antd-custom-theme-generator](https://github.com/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](https://ant.design/) provides plenty of UI components, styled with [less](http://lesscss.org/). You can customize the default theme modifying less variable, to achive this you have multiple ways ([check the doc here](https://ant.design/docs/react/customize-theme)). 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](reactjs.org) 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:

   ```sh
    $ npm -i -E --save-dev @pengcheng789/antd-custom-theme-generator
   ```

   Then generates your custom theme:

   ```sh
   $ 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:
>
> ```sh
> $ 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:

```sh
$ npm link
```

Then in another project with antd already installed and with a `custom-theme.less` file created, execute:

```sh
$ generate-theme
```

## TODO List:

- [ ] Add hot-reload generation