Customize Theme

Ant Design allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc.

In version 5.0, we provide a new way to customize themes. Different from the less and CSS variables of the 4.x version, with CSS-in-JS, the ability of theming has also been enhanced, including but not limited to:

Switching theme dynamically；
Multiple themes；
Customizing theme variables for some component；
...

Customize theme with `ConfigProvider`

In version 5.0 we call the smallest element that affects the theme Design Token. By modifying the Design Token, we can present various themes or components.

Customize Design Token

You can pass theme to ConfigProvider to customize theme. After migrate to V5, theme of V5 will be applied by default. Here's a simple example:

import { Button, ConfigProvider } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#00b96b',
      },
    }}
  >
    <Button />
  </ConfigProvider>
);

export default App;

You will get a theme with primary color #00b96b. And we can see the change in Button:

themed button

Use Preset Algorithms

Themes with different styles can be quickly generated by modifying algorithm. Ant Design 5.0 provides three sets of preset algorithms by default, which are default algorithm theme.defaultAlgorithm, dark algorithm theme.darkAlgorithm and compact algorithm theme.compactAlgorithm. You can switch algorithms by modifying the algorithm property of theme in ConfigProvider.

import { Button, ConfigProvider, theme } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      algorithm: theme.darkAlgorithm,
    }}
  >
    <Button />
  </ConfigProvider>
);

export default App;

Customize Component Token

In addition to Design Token, each component will also have its own Component Token to achieve style customization capabilities for components, and different components will not affect each other. Similarly, other Design Token of components can also be overridden in this way.

import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      components: {
        Radio: {
          colorPrimary: '#00b96b',
        },
      },
    }}
  >
    <Radio>Radio</Radio>
    <Checkbox>Checkbox</Checkbox>
  </ConfigProvider>
);

export default App;

In this way, we changed the primary color of Radio to #00b96b, and Checkbox is not affected.

component token

Notice: ConfigProvider will not take effect on static methods such as message.xxx, Modal.xxx, notification.xxx, because in these methods, antd will dynamically create new ones through ReactDOM.render React entities. Its context is not the same as the context of the current code, so context information cannot be obtained. When you need context information (such as the content configured by ConfigProvider), you can use the Modal.useModal method to return the modal entity and the contextHolder node. Just insert it where you need to get the context, or you can use App Component to simplify the problem of usingModal and other methods that need to manually implant the contextHolder.

Other Ways to Use Dynamic Themes

Switch Themes Dynamically

In v5, dynamically switching themes is very simple for users, you can dynamically switch themes at any time through the theme property of ConfigProvider without any additional configuration.

Local Theme

By nesting ConfigProvider you can apply local theme to some parts of your page. Design Tokens that have not been changed in the child theme will inherit the parent theme.

import { Button, ConfigProvider } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#1677ff',
      },
    }}
  >
    <Button />
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
        },
      }}
    >
      <Button />
    </ConfigProvider>
  </ConfigProvider>
);

export default App;

Consume Design Token

If you want to consume the Design Token under the current theme, we provide useToken hook to get Design Token.

import { Button, theme } from 'antd';
import React from 'react';

const { useToken } = theme;

const App: React.FC = () => {
  const { token } = useToken();

  return <Button style={{ backgroundColor: token.colorPrimary }}>Button</Button>;
};

export default App;

Static consume (e.g. less)

When you need token out of React life cycle, you can use static function to get them:

import { theme } from 'antd';

const { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm(defaultSeed);

If you want to use in preprocess style framework like less, use less-loader for injection:

{
  loader: "less-loader",
  options: {
    lessOptions: {
      modifyVars: mapToken,
    },
  },
}

Compatible package provide convert function to transform to v4 less variable. Read this for detail.

Advanced

In Design Token, we provide a three-layer structure that is more suitable for the design, and disassemble the Design Token into three parts: Seed Token, Map Token and Alias Token. These three groups of Tokens are not simple groupings, but a three-layer derivation relationship. Map Tokens are derived from Seed Tokens, and Alias Tokens are derived from Map Tokens. In most cases, using Seed Tokens is sufficient for custom themes. But if you need a higher degree of theme customization, you need to understand the life cycle of Design Token in antd.

Life Cycle of Design Token

token

Seed Token

Seed Token means the origin of all design intent. For example, we can change the theme color by changing colorPrimary, and the algorithm inside antd will automatically calculate and apply a series of corresponding colors according to the Seed Token:

const theme = {
  token: {
    colorPrimary: '#1890ff',
  },
};

Map Token

Map Token is a gradient variable derived from Seed. It is recommended to implement custom Map Token through theme.algorithm, which can ensure the gradient relationship between Map Tokens. It can also be overridden by theme.token to modify the value of some map tokens individually.

const theme = {
  token: {
    colorPrimaryBg: '#e6f7ff',
  },
};

Alias Token

Alias Token is used to control the style of some common components in batches, which is basically a Map Token alias, or a specially processed Map Token.

const theme = {
  token: {
    colorLink: '#1890ff',
  },
};

Algorithm

The basic algorithm is used to expand the Seed Token into a Map Token, such as calculating a gradient color palette from a basic color, or calculating rounded corners of various sizes from a basic rounded corner. Algorithms can be used alone or in any combination, for example, dark and compact algorithms can be combined to get a dark and compact theme.

import { theme } from 'antd';

const { darkAlgorithm, compactAlgorithm } = theme;

const theme = {
  algorithm: [darkAlgorithm, compactAlgorithm],
};

Legacy Browser Compatible

Please ref to CSS Compatible.

Server Side Render (SSR)

There are two options for server-side rendering styles, each with advantages and disadvantages:

Inline mode: there is no need to request additional style files during rendering. The advantage is to reduce additional network requests. The disadvantage is that the HTML volume will increase and the speed of the first screen rendering will be affected. Relevant discussion: #39891
Whole export: The antd component is pre-baked and styled as a css file to be introduced in the page. The advantage is that when opening any page, the same set of css files will be reused just like the traditional css scheme to hit the cache. The disadvantage is that if there are multiple themes in the page, additional baking is required

Inline mode

Use @ant-design/cssinjs to extract style:

import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import { renderToString } from 'react-dom/server';

export default () => {
  // SSR Render
  const cache = createCache();

  const html = renderToString(
    <StyleProvider cache={cache}>
      <MyApp />
    </StyleProvider>,
  );

  // Grab style from cache
  const styleText = extractStyle(cache);

  // Mix with style
  return `
<!DOCTYPE html>
<html>
  <head>
    ${styleText}
  </head>
  <body>
    <div id="root">${html}</div>
  </body>
</html>
`;
};

Whole export

If you want to detach a style file into a css file, try the following schemes:

Installation dependency

npm install ts-node tslib --save-dev

Add tsconfig.node.json

{
  "compilerOptions": {
    "strictNullChecks": true,
    "module": "NodeNext",
    "jsx": "react",
    "esModuleInterop": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Add scripts/genAntdCss.tsx

// scripts/genAntdCss.tsx
import { extractStyle } from '@ant-design/static-style-extract';
import fs from 'fs';

const outputPath = './public/antd.min.css';

const css = extractStyle();

fs.writeFileSync(outputPath, css);

If you want to use mixed themes or custom themes, you can use the following script:

import { extractStyle } from '@ant-design/static-style-extract';
import { ConfigProvider } from 'antd';
import fs from 'fs';
import React from 'react';

const outputPath = './public/antd.min.css';

const testGreenColor = '#008000';
const testRedColor = '#ff0000';

const css = extractStyle((node) => (
  <>
    <ConfigProvider
      theme={{
        token: {
          colorBgBase: testGreenColor,
        },
      }}
    >
      {node}
    </ConfigProvider>
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: testGreenColor,
        },
      }}
    >
      <ConfigProvider
        theme={{
          token: {
            colorBgBase: testRedColor,
          },
        }}
      >
        {node}
      </ConfigProvider>
    </ConfigProvider>
  </>
));

fs.writeFileSync(outputPath, css);

You can choose to execute this script before starting the development command or before compiling. Running this script will generate a full antd.min.css file directly in the specified directory of the current project (e.g. public).

Take Next.js for example（example）：

// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx",
    "prebuild": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx"
  }
}

Then, you just need to import this file into the pages/_app.tsx file:

import { StyleProvider } from '@ant-design/cssinjs';
import type { AppProps } from 'next/app';
import '../public/antd.min.css';
import '../styles/globals.css'; // add this line

export default function App({ Component, pageProps }: AppProps) {
  return (
    <StyleProvider hashPriority="high">
      <Component {...pageProps} />
    </StyleProvider>
  );
}

Custom theme

If you're using a custom theme for your project, try baking in the following ways:

import { extractStyle } from '@ant-design/static-style-extract';
import { ConfigProvider } from 'antd';

const cssText = extractStyle((node) => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: 'red',
      },
    }}
  >
    {node}
  </ConfigProvider>
));

Mixed theme

If you're using a mixed theme for your project, try baking in the following ways:

import { extractStyle } from '@ant-design/static-style-extract';
import { ConfigProvider } from 'antd';

const cssText = extractStyle((node) => (
  <>
    <ConfigProvider
      theme={{
        token: {
          colorBgBase: 'green ',
        },
      }}
    >
      {node}
    </ConfigProvider>
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: 'blue',
        },
      }}
    >
      <ConfigProvider
        theme={{
          token: {
            colorBgBase: 'red ',
          },
        }}
      >
        {node}
      </ConfigProvider>
    </ConfigProvider>
  </>
));

More about static-style-extract, see static-style-extract.

Shadow DOM Usage

Since <style /> tag insertion is different from normal DOM in Shadow DOM scenario, you need to use StyleProvider of @ant-design/cssinjs to configure the container property to set the insertion position:

import { StyleProvider } from '@ant-design/cssinjs';
import { createRoot } from 'react-dom/client';

const shadowRoot = someEle.attachShadow({ mode: 'open' });
const container = document.createElement('div');
shadowRoot.appendChild(container);
const root = createRoot(container);

root.render(
  <StyleProvider container={shadowRoot}>
    <MyApp />
  </StyleProvider>,
);

API

Theme

Property	Description	Type	Default
token	Modify Design Token	`AliasToken`	-
inherit	Inherit theme configured in upper ConfigProvider	boolean	true
algorithm	Modify the algorithms of theme	`(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]`	`defaultAlgorithm`
components	Modify Component Token and Alias Token applied to components	OverrideToken	-

OverrideToken

Property	Description	Type	Default
`Component` (Can be any antd Component name like `Button`)	Modify Component Token or override Component used Alias Token	`ComponentToken & AliasToken`	-

SeedToken

Token Name	Description	Type	Default Value
borderRadius	Border radius of base components	number	6
colorBgBase	Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!	string	#fff
colorError	Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.	string	#ff4d4f
colorInfo	Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.	string	#1677ff
colorPrimary	Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.	string	#1677ff
colorSuccess	Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.	string	#52c41a
colorTextBase	Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!	string	#000
colorWarning	Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.	string	#faad14
controlHeight	The height of the basic controls such as buttons and input boxes in Ant Design	number	32
fontFamily		string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontFamilyCode		string	'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
lineType	Border style of base components	string	solid
lineWidth	Border width of base components	number	1
motionBase		number	0
motionEaseInBack	Preset motion curve.	string	cubic-bezier(0.71, -0.46, 0.88, 0.6)
motionEaseInOut	Preset motion curve.	string	cubic-bezier(0.645, 0.045, 0.355, 1)
motionEaseInOutCirc	Preset motion curve.	string	cubic-bezier(0.78, 0.14, 0.15, 0.86)
motionEaseInQuint	Preset motion curve.	string	cubic-bezier(0.755, 0.05, 0.855, 0.06)
motionEaseOut	Preset motion curve.	string	cubic-bezier(0.215, 0.61, 0.355, 1)
motionEaseOutBack	Preset motion curve.	string	cubic-bezier(0.12, 0.4, 0.29, 1.46)
motionEaseOutCirc	Preset motion curve.	string	cubic-bezier(0.08, 0.82, 0.17, 1)
motionEaseOutQuint	Preset motion curve.	string	cubic-bezier(0.23, 1, 0.32, 1)
motionUnit	The unit of animation duration change	number	0.1
opacityImage		number	1
sizePopupArrow		number	16
sizeStep	The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2	number	4
sizeUnit	The unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size step	number	4
wireframe		boolean	false
zIndexBase	The base Z axis value of all components, which can be used to control the level of some floating components based on the Z axis value, such as BackTop, Affix, etc.	number	0
zIndexPopupBase	Base zIndex of component like FloatButton, Affix which can be cover by large popup	number	1000

MapToken

Inherit all SeedToken properties

Token Name	Description	Type	Default Value
borderRadiusLG	LG size border radius, used in some large border radius components, such as Card, Modal and other components.	number	8
borderRadiusOuter		number	4
borderRadiusSM	SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size	number	4
borderRadiusXS	XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius.	number	2
colorBgContainer	Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.	string	#ffffff
colorBgElevated		string	#ffffff
colorBgLayout		string	#f5f5f5
colorBgMask	The background color of the mask, used to cover the content below the mask, Modal, Drawer and other components use this token	string	rgba(0, 0, 0, 0.45)
colorBgSpotlight		string	rgba(0, 0, 0, 0.85)
colorBorder	Default border color, used to separate different elements, such as: form separator, card separator, etc.	string	#d9d9d9
colorBorderSecondary	Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used.	string	#f0f0f0
colorErrorActive	The active state of the error color.	string	#d9363e
colorErrorBg	The background color of the error state.	string	#fff2f0
colorErrorBgHover	The hover state background color of the error state.	string	#fff1f0
colorErrorBorder	The border color of the error state.	string	#ffccc7
colorErrorBorderHover	The hover state border color of the error state.	string	#ffa39e
colorErrorHover	The hover state of the error color.	string	#ff7875
colorErrorText	The default state of the text in the error color.	string	#ff4d4f
colorErrorTextActive	The active state of the text in the error color.	string	#d9363e
colorErrorTextHover	The hover state of the text in the error color.	string	#ff7875
colorFill		string	rgba(0, 0, 0, 0.15)
colorFillQuaternary		string	rgba(0, 0, 0, 0.02)
colorFillSecondary		string	rgba(0, 0, 0, 0.06)
colorFillTertiary		string	rgba(0, 0, 0, 0.04)
colorInfoActive	Active state of dark color of information color.	string	#0958d9
colorInfoBg	Light background color of information color.	string	#e6f4ff
colorInfoBgHover	Hover state of light background color of information color.	string	#bae0ff
colorInfoBorder	Border color of information color.	string	#91caff
colorInfoBorderHover	Hover state of border color of information color.	string	#69b1ff
colorInfoHover	Hover state of dark color of information color.	string	#69b1ff
colorInfoText	Default state of text color of information color.	string	#1677ff
colorInfoTextActive	Active state of text color of information color.	string	#0958d9
colorInfoTextHover	Hover state of text color of information color.	string	#4096ff
colorPrimaryActive	Dark active state under the main color gradient.	string	#0958d9
colorPrimaryBg	Light background color of primary color, usually used for weak visual level selection state.	string	#e6f4ff
colorPrimaryBgHover	The hover state color corresponding to the light background color of the primary color.	string	#bae0ff
colorPrimaryBorder	The stroke color under the main color gradient, used on the stroke of components such as Slider.	string	#91caff
colorPrimaryBorderHover	The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button.	string	#69b1ff
colorPrimaryHover	Hover state under the main color gradient.	string	#4096ff
colorPrimaryText	Text color under the main color gradient.	string	#1677ff
colorPrimaryTextActive	Active state of text color under the main color gradient.	string	#0958d9
colorPrimaryTextHover	Hover state of text color under the main color gradient.	string	#4096ff
colorSuccessActive	Active state color of dark success color	string	#389e0d
colorSuccessBg	Light background color of success color, used for Tag and Alert success state background color	string	#f6ffed
colorSuccessBgHover	Light background color of success color, but antd does not use this token currently	string	#d9f7be
colorSuccessBorder	Border color of success color, used for Tag and Alert success state border color	string	#b7eb8f
colorSuccessBorderHover	Hover state color of success color border	string	#95de64
colorSuccessHover	Hover state color of dark success color	string	#95de64
colorSuccessText	Default state color of success color text	string	#52c41a
colorSuccessTextActive	Active state color of success color text	string	#389e0d
colorSuccessTextHover	Hover state color of success color text	string	#73d13d
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0, 0, 0, 0.88)
colorTextQuaternary		string	rgba(0, 0, 0, 0.25)
colorTextSecondary		string	rgba(0, 0, 0, 0.65)
colorTextTertiary		string	rgba(0, 0, 0, 0.45)
colorWarningActive	The active state of the warning color.	string	#d48806
colorWarningBg	The background color of the warning state.	string	#fffbe6
colorWarningBgHover	The hover state background color of the warning state.	string	#fff1b8
colorWarningBorder	The border color of the warning state.	string	#ffe58f
colorWarningBorderHover	The hover state border color of the warning state.	string	#ffd666
colorWarningHover	The hover state of the warning color.	string	#ffd666
colorWarningText	The default state of the text in the warning color.	string	#faad14
colorWarningTextActive	The active state of the text in the warning color.	string	#d48806
colorWarningTextHover	The hover state of the text in the warning color.	string	#ffc53d
colorWhite	Pure white color don't changed by theme	string	#fff
controlHeightLG	LG component height	number	40
controlHeightSM	SM component height	number	24
controlHeightXS	XS component height	number	16
fontSizeHeading1	Font size of h1 tag.	number	38
fontSizeHeading2	Font size of h2 tag.	number	30
fontSizeHeading3	Font size of h3 tag.	number	24
fontSizeHeading4	Font size of h4 tag.	number	20
fontSizeHeading5	Font size of h5 tag.	number	16
fontSizeLG	Large font size	number	16
fontSizeSM	Small font size	number	12
fontSizeXL	Super large font size	number	20
lineHeight	Line height of text.	number	1.5714285714285714
lineHeightHeading1	Line height of h1 tag.	number	1.2105263157894737
lineHeightHeading2	Line height of h2 tag.	number	1.2666666666666666
lineHeightHeading3	Line height of h3 tag.	number	1.3333333333333333
lineHeightHeading4	Line height of h4 tag.	number	1.4
lineHeightHeading5	Line height of h5 tag.	number	1.5
lineHeightLG	Line height of large text.	number	1.5
lineHeightSM	Line height of small text.	number	1.6666666666666667
lineWidthBold	The default line width of the outline class components, such as Button, Input, Select, etc.	number	2
motionDurationFast	Motion speed, fast speed. Used for small element animation interaction.	string	0.1s
motionDurationMid	Motion speed, medium speed. Used for medium element animation interaction.	string	0.2s
motionDurationSlow	Motion speed, slow speed. Used for large element animation interaction.	string	0.3s
size		number	16
sizeLG		number	24
sizeMD		number	20
sizeMS		number	16
sizeSM		number	12
sizeXL		number	32
sizeXS		number	8
sizeXXL		number	48
sizeXXS		number	4

AliasToken

Inherit all SeedToken and MapToken properties

Token Name	Description	Type	Default Value
boxShadow	Control the box shadow style of an element.	string	0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
boxShadowSecondary	Control the secondary box shadow style of an element.	string	0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
boxShadowTertiary	Control the tertiary box shadow style of an element.	string	0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)
colorBgContainerDisabled	Control the background color of container in disabled state.	string	rgba(0, 0, 0, 0.04)
colorBgTextActive	Control the background color of text in active state.	string	rgba(0, 0, 0, 0.15)
colorBgTextHover	Control the background color of text in hover state.	string	rgba(0, 0, 0, 0.06)
colorBorderBg	Control the color of background border of element.	string	#ffffff
colorErrorOutline	Control the outline color of input component in error state.	string	rgba(255, 38, 5, 0.06)
colorFillAlter	Control the alternative background color of element.	string	rgba(0, 0, 0, 0.02)
colorFillContent	Control the background color of content area.	string	rgba(0, 0, 0, 0.06)
colorFillContentHover	Control the style of background color of content area when mouse hovers over it.	string	rgba(0, 0, 0, 0.15)
colorHighlight	Control the color of page element when highlighted.	string	#ff4d4f
colorIcon	Weak action. Such as `allowClear` or Alert close button	string	rgba(0, 0, 0, 0.45)
colorIconHover	Weak action hover color. Such as `allowClear` or Alert close button	string	rgba(0, 0, 0, 0.88)
colorLink	Control the color of hyperlink.	string	#1677ff
colorLinkActive	Control the color of hyperlink when clicked.	string	#0958d9
colorLinkHover	Control the color of hyperlink when hovering.	string	#69b1ff
colorSplit	Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.	string	rgba(5, 5, 5, 0.06)
colorTextDescription	Control the font color of text description.	string	rgba(0, 0, 0, 0.45)
colorTextDisabled	Control the color of text in disabled state.	string	rgba(0, 0, 0, 0.25)
colorTextHeading	Control the font color of heading.	string	rgba(0, 0, 0, 0.88)
colorTextLabel	Control the font color of text label.	string	rgba(0, 0, 0, 0.65)
colorTextLightSolid	Control the highlight color of text with background color, such as the text in Primary Button components.	string	#fff
colorTextPlaceholder	Control the color of placeholder text.	string	rgba(0, 0, 0, 0.25)
colorWarningOutline	Control the outline color of input component in warning state.	string	rgba(255, 215, 5, 0.1)
controlInteractiveSize	Control the interactive size of control component.	number	16
controlItemBgActive	Control the background color of control component item when active.	string	#e6f4ff
controlItemBgActiveDisabled	Control the background color of control component item when active and disabled.	string	rgba(0, 0, 0, 0.15)
controlItemBgActiveHover	Control the background color of control component item when hovering and active.	string	#bae0ff
controlItemBgHover	Control the background color of control component item when hovering.	string	rgba(0, 0, 0, 0.04)
controlOutline	Control the outline color of input component.	string	rgba(5, 145, 255, 0.1)
controlOutlineWidth	Control the outline width of input component.	number	2
controlPaddingHorizontal	Control the horizontal padding of an element.	number	12
controlPaddingHorizontalSM	Control the horizontal padding of an element with a small-medium size.	number	8
controlTmpOutline	Default style outline color.	string	rgba(0, 0, 0, 0.02)
fontSizeIcon	Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.	number	12
fontWeightStrong	Control the font weight of heading components (such as h1, h2, h3) or selected item.	number	600
lineWidthFocus	Control the width of the line when the component is in focus state.	number	4
linkDecoration	Control the text decoration style of a link.	undefined \| TextDecoration<string \| number>	none
linkFocusDecoration	Control the text decoration style of a link on focus.	undefined \| TextDecoration<string \| number>	none
linkHoverDecoration	Control the text decoration style of a link on mouse hover.	undefined \| TextDecoration<string \| number>	none
margin	Control the margin of an element, with a medium size.	number	16
marginLG	Control the margin of an element, with a large size.	number	24
marginMD	Control the margin of an element, with a medium-large size.	number	20
marginSM	Control the margin of an element, with a medium-small size.	number	12
marginXL	Control the margin of an element, with an extra-large size.	number	32
marginXS	Control the margin of an element, with a small size.	number	8
marginXXL	Control the margin of an element, with the largest size.	number	48
marginXXS	Control the margin of an element, with the smallest size.	number	4
opacityLoading	Control the opacity of the loading state.	number	0.65
padding	Control the padding of the element.	number	16
paddingContentHorizontal	Control the horizontal padding of content element.	number	16
paddingContentHorizontalLG	Control the horizontal padding of content element, suitable for large screen devices.	number	24
paddingContentHorizontalSM	Control the horizontal padding of content element, suitable for small screen devices.	number	16
paddingContentVertical	Control the vertical padding of content element.	number	12
paddingContentVerticalLG	Control the vertical padding of content element, suitable for large screen devices.	number	16
paddingContentVerticalSM	Control the vertical padding of content element, suitable for small screen devices.	number	8
paddingLG	Control the large padding of the element.	number	24
paddingMD	Control the medium padding of the element.	number	20
paddingSM	Control the small padding of the element.	number	12
paddingXL	Control the extra large padding of the element.	number	32
paddingXS	Control the extra small padding of the element.	number	8
paddingXXS	Control the extra extra small padding of the element.	number	4
screenLG	Control the screen width of large screens.	number	992
screenLGMax	Control the maximum width of large screens.	number	1199
screenLGMin	Control the minimum width of large screens.	number	992
screenMD	Control the screen width of medium screens.	number	768
screenMDMax	Control the maximum width of medium screens.	number	991
screenMDMin	Control the minimum width of medium screens.	number	768
screenSM	Control the screen width of small screens.	number	576
screenSMMax	Control the maximum width of small screens.	number	767
screenSMMin	Control the minimum width of small screens.	number	576
screenXL	Control the screen width of extra large screens.	number	1200
screenXLMax	Control the maximum width of extra large screens.	number	1599
screenXLMin	Control the minimum width of extra large screens.	number	1200
screenXS	Control the screen width of extra small screens.	number	480
screenXSMax	Control the maximum width of extra small screens.	number	575
screenXSMin	Control the minimum width of extra small screens.	number	480
screenXXL	Control the screen width of extra extra large screens.	number	1600
screenXXLMin	Control the minimum width of extra extra large screens.	number	1600

StyleProvider

Please ref @ant-design/cssinjs.

How to Debug your Theme

We provide tools to help users debug themes: Theme Editor

You can use this tool to freely modify Design Token to meet your theme expectations.

Theme Presets

Ant Design 4.x

FAQ

Why component re-mounted when `theme` changed from `undefined` to some object or to `undefined`?

In ConfigProvider, we pass context through DesignTokenContext. When theme is undefined, a layer of Provider will not be set, so React VirtualDOM structure changes from scratch or from existence to nothing, causing components to be re-mounted. Solution: Replace undefined with an empty object {}.

Customize theme with ConfigProvider