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