antd4-theme-vars v2.0.0

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

ThemeConfig

LICENSE

MIT