Nanoseconds Produce Minutes
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@emeks/antd-custom-theme-generator

0.1.6 • Public • Published

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.

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:

    • Option A: Without installing this plugin

      $ npx @emeks/antd-custom-theme-generator generate-theme
       
      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
  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

Install

npm i @emeks/antd-custom-theme-generator

DownloadsWeekly Downloads

65

Version

0.1.6

License

Apache-2.0

Unpacked Size

17.8 kB

Total Files

6

Last publish

Collaborators

  • avatar
  • avatar