antd4-theme-vars

What

antd-theme-vars helps you generate static theme css files based on the prefixCls config of ConfigProvider.

With this, you can easily customize the themes of various antd components.

An online demo.

Install

$ npm install antd4-theme-vars --save-dev
# or
$ yarn add antd4-theme-vars --dev
# or
$ pnpm add antd4-theme-vars --save-dev

Usage

Configuration File

Use .antd4tvrc.cjs file to configure the theme variables.

An example:

const { defineConfig } = require("antd4-theme-vars");

module.exports = defineConfig({
  themes: [
    {
      prefixCls: "custom",
      fileName: "custom",
      variables: {
        "primary-color": "#25b864",
      },
    },
  ],
});

Script

Add the antd4tv gen command to the scripts section in package.json.

You can use it like:

"scripts": {
  "antd4tv": "antd4tv gen",
  "dev": "npm run antd4tv && vite"
}

ConfigProvider

In your entry component(such as App.tsx). Add:

+ import "antd4-theme-vars/themes/custom.css";

Use ConfigProvider in your component that needs to set custom theme:

import { ConfigProvider } from "antd";

export default () => {
    <ConfigProvider prefixCls="custom">
      {/* do something... */}
    </ConfigProvider>
}

Configuration

| Name | Type | Default | Description | | -------------------- | ------------------------------ | ----------------------------------------------------------- | ---------------------------------------- | | themes | ThemeConfig [] | - | Theme configs | | outputDir | string | join(process.cwd(), node_modules/antd4-theme-vars/themes) | Output directory for generated css files | | minifyCSS | boolean | true | Whether to minify css files | | antdLessPath | string | join(process.cwd(), "node_modules/antd/dist/antd.less") | antd less file path | | antdLessLookingPaths | string[] | [join(process.cwd(), "node_modules/antd/lib")] | antd less looking paths |

ThemeConfig

| Name | Type | Default | Description | | --------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------- | | prefixCls | string | - | not allowed to be ant | | fileName | string | - | output file name | | variables | object | - | antd less variables, see default.less |

LICENSE

MIT