Necessary Pigeonholing Mechanism
    Have ideas to improve npm?Join in the discussion! »

    @emeks/antd-custom-theme-generator

    0.1.7 • 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 was created 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. To generate the css file with your custom theme, run this command:

      • Option A: Without installing this plugin

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

    Options

    Name Default Description
    verbose Print more info for debugging
    customThemeFilePath ./custom-theme.less Path of the less file with the variables your want to override
    generatedThemeFilePath ./custom-theme.css Output path where the script give you the css file with your new theme
    antdLibraryPath ./node_modules/antd Path of the antd library
    theme default Antd theme you want to override (e.g. dark or compact) - check all available options

    Notes:

    • The order of the options is important.
    $ generate-theme [verbose] [customThemeFilePath] [generatedThemeFilePath] [antdLibraryPath] [theme]
    • Notice that all these paths must be defined relative to your project root path.

    Examples

    • Generate dark theme

      $ npx @emeks/antd-custom-theme-generator ./custom-theme.less ./custom-theme.css ./node_modules/antd dark
    • Generate default theme with diferents paths

      $ npx @emeks/antd-custom-theme-generator ./styles/custom-theme.less ./styles/custom-theme.css

    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

    Q2: Should I run this command every time i change my custom-theme.less file?

    Yes, we don't provide hot-reload yet.

    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

    103

    Version

    0.1.7

    License

    Apache-2.0

    Unpacked Size

    19.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar