@emeks/antd-custom-theme-generator

    0.2.1 • 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 variables (check their doc for multiple ways to achieve this), but the main issue being that you don't have a simple way to create a static .css file with zero configuration.

    This package was created with Antd Design v4.6.6 and aims to ease the theme's customization process without having to install more dependencies yourself, set up less or eject your React project.

    Usage

    Generate custom theme styles

    1. Define your custom theme creating a .less file overriding Antd's variables (by default: ./custom-theme.less).

      • Example:
        @primary-color: #9063cd;
        @success-color: #a8d3c4;
    2. Generate custom theme's .css file.

      • Option A:
        Without installing this package:
        $ npx @emeks/antd-custom-theme-generator
        
        output > ./custom-theme.css
      • Option B:
        Installing this package as a dev dependency:
        $ npm i -E --save-dev @emeks/antd-custom-theme-generator
        Then generating your theme:
        $ generate-theme
        
        default output > ./custom-theme.css
    3. Replace "antd/dist/antd.css" import in your project, with the output file of your custom theme generated by this script (by default: ./custom-theme.css).

    Options

    Name Default Description
    --verbose or -v Prints a little bit more info for debugging purposes
    --watch or -w Keeps script running, recompile on <customThemeFilePath> change
    --antd ./node_modules/antd Path to the antd library directory
    --theme default Antd theme you want to use as base (e.g. dark or compact) - Check available options
    <customThemeFilePath> ./custom-theme.less Path to the custom .less file with Antd variables overriden
    <generatedThemeFilePath> ./custom-theme.css Output Path to the compiled .css file containing your new theme

    Notes:
    The order of paths is important.

      $ generate-theme [--verbose] [--watch] [--antd <dir>] [--theme <theme>] [<customThemeFilePath>] [<generatedThemeFilePath>]

    Examples

    • Generate a custom theme using dark theme as base:
      $ npx @emeks/antd-custom-theme-generator --theme dark
    • Generate a custom theme using default theme as base specifying non default paths:
      $ npx @emeks/antd-custom-theme-generator ./styles/custom-theme.less ./styles/custom-theme.css

    FAQ

    Q1: Which variables can I override?

    You may override any variable exposed by Antd in this file.

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

    No, you could pass the -w argument to let the script observe <customThemeFilePath> file and recompile it if it changes.

    Development

    • Inside package folder, link it globally:
      $ npm link
    • Use the package in your project (with antd already installed and a <customThemeFilePath> file created as well):
      $ generate-theme

    Install

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

    DownloadsWeekly Downloads

    278

    Version

    0.2.1

    License

    Apache-2.0

    Unpacked Size

    18.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • bluesd
    • mk-emeks
    • randomeduc