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.

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
outputDir	string	node_modules/antd4-theme-vars/themes	Output directory for generated css files
themes	ThemeConfig []	-	Theme configs

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