logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Ant Design of React
  • Changelog
    v5.25.4
  • Basic Usage
    • Getting Started
    • Usage with Vite
    • Usage with Next.js
      Updated
    • Usage with Umi
    • Usage with Rsbuild
    • Usage with Farm
    • Usage with Refine
  • Advanced
    • Customize Theme
    • CSS Compatible
    • Server Side Rendering
    • CSS Variables
      New
    • Use custom date library
    • Internationalization
    • Common Props
    • React 19 Compatibility
      New
  • Migration
    • V4 to V5
    • Less variables to Component Token
  • Other
    • Third-Party Libraries
    • Contributing
    • FAQ
Basic Usage
Customize Design Token
Use Preset Algorithms
Customize Component Token
Disable Motion
Advanced
Switch Themes Dynamically
Nested Theme
Consume Design Token
Static consume (e.g. less)
Theme editor
Design Token
Life of Design Token
Seed Token
Map Token
Alias Token
Algorithm
API
Theme
ComponentsConfig
SeedToken
MapToken
AliasToken
FAQ
Why component re-mounted when theme changed from undefined to some object or to undefined?

Customize Theme

contributors
  • Usage with RefineCSS Compatible

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    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:

    1. Switching theme dynamically;
    2. Multiple themes;
    3. Customizing theme variables for some components;
    4. ...

    Basic Usage

    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. You can pass theme to ConfigProvider to customize theme. After migrate to V5, theme of V5 will be applied by default.

    WARNING

    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.

    Customize Design Token

    By modifying token property of theme, we can modify Design Token globally. Some tokens will affect other tokens. We call these tokens Seed Token.

    Loading Demo...

    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:

    • default algorithm theme.defaultAlgorithm
    • dark algorithm theme.darkAlgorithm
    • compact algorithm theme.compactAlgorithm

    You can switch algorithms by modifying the algorithm property of theme in ConfigProvider.

    Loading Demo...

    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.

    Algorithm

    By default, all component tokens can only override global token and will not be derived based on Seed Token.

    In version >= 5.8.0, component tokens support the algorithm property, which can be used to enable algorithm or pass in other algorithms.

    Loading Demo...

    Disable Motion

    antd has built-in interaction animations to make enterprise-level pages more detailed. In some extreme scenarios, it may affect the performance of page interaction. If you need to turn off the animation, try setting motion of token to false:

    Loading Demo...

    Advanced

    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.

    Loading Demo...

    Nested 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.

    Loading Demo...

    Consume Design Token

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

    Loading Demo...

    Static consume (e.g. less)

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

    jsx
    import { theme } from 'antd';
    const { getDesignToken } = theme;
    const globalToken = getDesignToken();

    Same as ConfigProvider, getDesignToken could also accept a config object as theme:

    tsx
    import type { ThemeConfig } from 'antd';
    import { theme } from 'antd';
    import { createRoot } from 'react-dom/client';
    const { getDesignToken, useToken } = theme;
    const config: ThemeConfig = {
    token: {
    colorPrimary: '#1890ff',
    },
    };
    // By static function
    const globalToken = getDesignToken(config);
    // By hook
    const App = () => {
    const { token } = useToken();
    return null;
    };
    // Example for rendering
    createRoot(document.getElementById('#app')).render(
    <ConfigProvider theme={config}>
    <App />
    </ConfigProvider>,
    );

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

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

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

    Theme editor

    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.

    Design Token

    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 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:

    tsx
    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.

    tsx
    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.

    tsx
    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.

    tsx
    import { theme } from 'antd';
    const { darkAlgorithm, compactAlgorithm } = theme;
    const theme = {
    algorithm: [darkAlgorithm, compactAlgorithm],
    };

    API

    Theme

    PropertyDescriptionTypeDefault
    tokenModify Design TokenAliasToken-
    inheritInherit theme configured in upper ConfigProviderbooleantrue
    algorithmModify the algorithms of theme(token: SeedToken) => MapToken | ((token: SeedToken) => MapToken)[]defaultAlgorithm
    componentsModify Component Token and Alias Token applied to componentsComponentsConfig-
    cssVarToggle CSS Variables, refer CSS Variablesboolean | { prefix?: string; key?: string }false
    hashedComponent class Hash value, refer CSS Variablesbooleantrue

    ComponentsConfig

    PropertyDescriptionTypeDefault
    Component (Can be any antd Component name like Button)Modify Component Token or override Component used Alias TokenComponentToken & AliasToken & { algorithm: boolean | (token: SeedToken) => MapToken | ((token: SeedToken) => MapToken)[]}-

    algorithm of component is false by default, which means tokens of component will only override global token. When it is set with true, the algorithm will be the same as global. You can also pass algorithm or Array of algorithm, and it will override algorithm of global.

    SeedToken

    Token NameDescriptionTypeDefault Value
    borderRadiusBorder radius of base componentsnumber6
    colorBgBaseUsed 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
    colorErrorUsed to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.string#ff4d4f
    colorInfoUsed to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.string#1677ff
    colorLinkControl the color of hyperlink.string#1677ff
    colorPrimaryBrand 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
    colorSuccessUsed to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.string#52c41a
    colorTextBaseUsed 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
    colorWarningUsed to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.string#faad14
    controlHeightThe height of the basic controls such as buttons and input boxes in Ant Designnumber32
    fontFamilyThe font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.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'
    fontFamilyCodeCode font, used for code, pre and kbd elements in Typographystring'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
    fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
    lineTypeBorder style of base componentsstringsolid
    lineWidthBorder width of base componentsnumber1
    motionUsed to configure the motion effect, when it is `false`, the motion is turned offbooleantrue
    motionBasenumber0
    motionEaseInBackPreset motion curve.string
    Cubic Bezier Visualizer
    cubic-bezier(0.71, -0.46, 0.88, 0.6)External Link Icon
    motionEaseInOutPreset motion curve.string
    Cubic Bezier Visualizer
    cubic-bezier(0.645, 0.045, 0.355, 1)External Link Icon
    motionEaseInOutCircPreset motion curve.string
    Cubic Bezier Visualizer
    cubic-bezier(0.78, 0.14, 0.15, 0.86)External Link Icon
    motionEaseInQuintPreset motion curve.string
    Cubic Bezier Visualizer
    cubic-bezier(0.755, 0.05, 0.855, 0.06)External Link Icon
    motionEaseOutPreset motion curve.string
    Cubic Bezier Visualizer
    cubic-bezier(0.215, 0.61, 0.355, 1)External Link Icon
    motionEaseOutBackPreset motion curve.string
    Cubic Bezier Visualizer
    cubic-bezier(0.12, 0.4, 0.29, 1.46)External Link Icon
    motionEaseOutCircPreset motion curve.string
    Cubic Bezier Visualizer
    cubic-bezier(0.08, 0.82, 0.17, 1)External Link Icon
    motionEaseOutQuintPreset motion curve.string
    Cubic Bezier Visualizer
    cubic-bezier(0.23, 1, 0.32, 1)External Link Icon
    motionUnitThe unit of animation duration changenumber0.1
    opacityImageControl image opacitynumber1
    sizePopupArrowThe size of the component arrownumber16
    sizeStepThe 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 2number4
    sizeUnitThe unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size stepnumber4
    wireframeUsed to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration itembooleanfalse
    zIndexBaseThe 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.number0
    zIndexPopupBaseBase zIndex of component like FloatButton, Affix which can be cover by large popupnumber1000

    MapToken

    Inherit all SeedToken properties

    Token NameDescriptionTypeDefault Value
    borderRadiusLGLG size border radius, used in some large border radius components, such as Card, Modal and other components.number8
    borderRadiusOuterOuter border radiusnumber4
    borderRadiusSMSM size border radius, used in small size components, such as Button, Input, Select and other input components in small sizenumber4
    borderRadiusXSXS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius.number2
    colorBgBlurControl the background color of frosted glass container, usually transparent.stringtransparent
    colorBgContainerContainer background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.string#ffffff
    colorBgElevatedContainer background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc.string#ffffff
    colorBgLayoutThis color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong.string#f5f5f5
    colorBgMaskThe background color of the mask, used to cover the content below the mask, Modal, Drawer and other components use this tokenstringrgba(0,0,0,0.45)
    colorBgSolidSolid background color, currently only used for the default solid button background color.stringrgb(0,0,0)
    colorBgSolidActiveSolid background color active state, currently only used in the active effect of the default solid button.stringrgba(0,0,0,0.95)
    colorBgSolidHoverSolid background color hover state, currently only used in the hover effect of the default solid button.stringrgba(0,0,0,0.75)
    colorBgSpotlightThis color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip.stringrgba(0,0,0,0.85)
    colorBorderDefault border color, used to separate different elements, such as: form separator, card separator, etc.string#d9d9d9
    colorBorderSecondarySlightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used.string#f0f0f0
    colorErrorActiveThe active state of the error color.string#d9363e
    colorErrorBgThe background color of the error state.string#fff2f0
    colorErrorBgActiveThe active state background color of the error state.string#ffccc7
    colorErrorBgFilledHoverThe wrong color fills the background color of the suspension state, which is currently only used in the hover effect of the dangerous filled button.string#ffdfdc
    colorErrorBgHoverThe hover state background color of the error state.string#fff1f0
    colorErrorBorderThe border color of the error state.string#ffccc7
    colorErrorBorderHoverThe hover state border color of the error state.string#ffa39e
    colorErrorHoverThe hover state of the error color.string#ff7875
    colorErrorTextThe default state of the text in the error color.string#ff4d4f
    colorErrorTextActiveThe active state of the text in the error color.string#d9363e
    colorErrorTextHoverThe hover state of the text in the error color.string#ff7875
    colorFillThe darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider.stringrgba(0,0,0,0.15)
    colorFillQuaternaryThe weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc.stringrgba(0,0,0,0.02)
    colorFillSecondaryThe second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc.stringrgba(0,0,0,0.06)
    colorFillTertiaryThe third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.stringrgba(0,0,0,0.04)
    colorInfoActiveActive state of dark color of information color.string#0958d9
    colorInfoBgLight background color of information color.string#e6f4ff
    colorInfoBgHoverHover state of light background color of information color.string#bae0ff
    colorInfoBorderBorder color of information color.string#91caff
    colorInfoBorderHoverHover state of border color of information color.string#69b1ff
    colorInfoHoverHover state of dark color of information color.string#69b1ff
    colorInfoTextDefault state of text color of information color.string#1677ff
    colorInfoTextActiveActive state of text color of information color.string#0958d9
    colorInfoTextHoverHover state of text color of information color.string#4096ff
    colorLinkActiveControl the color of hyperlink when clicked.string#0958d9
    colorLinkHoverControl the color of hyperlink when hovering.string#69b1ff
    colorPrimaryActiveDark active state under the main color gradient.string#0958d9
    colorPrimaryBgLight background color of primary color, usually used for weak visual level selection state.string#e6f4ff
    colorPrimaryBgHoverThe hover state color corresponding to the light background color of the primary color.string#bae0ff
    colorPrimaryBorderThe stroke color under the main color gradient, used on the stroke of components such as Slider.string#91caff
    colorPrimaryBorderHoverThe 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
    colorPrimaryHoverHover state under the main color gradient.string#4096ff
    colorPrimaryTextText color under the main color gradient.string#1677ff
    colorPrimaryTextActiveActive state of text color under the main color gradient.string#0958d9
    colorPrimaryTextHoverHover state of text color under the main color gradient.string#4096ff
    colorSuccessActiveActive state color of dark success colorstring#389e0d
    colorSuccessBgLight background color of success color, used for Tag and Alert success state background colorstring#f6ffed
    colorSuccessBgHoverLight background color of success color, but antd does not use this token currentlystring#d9f7be
    colorSuccessBorderBorder color of success color, used for Tag and Alert success state border colorstring#b7eb8f
    colorSuccessBorderHoverHover state color of success color borderstring#95de64
    colorSuccessHoverHover state color of dark success colorstring#95de64
    colorSuccessTextDefault state color of success color textstring#52c41a
    colorSuccessTextActiveActive state color of success color textstring#389e0d
    colorSuccessTextHoverHover state color of success color textstring#73d13d
    colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0,0,0,0.88)
    colorTextQuaternaryThe fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.stringrgba(0,0,0,0.25)
    colorTextSecondaryThe second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.stringrgba(0,0,0,0.65)
    colorTextTertiaryThe third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc.stringrgba(0,0,0,0.45)
    colorWarningActiveThe active state of the warning color.string#d48806
    colorWarningBgThe background color of the warning state.string#fffbe6
    colorWarningBgHoverThe hover state background color of the warning state.string#fff1b8
    colorWarningBorderThe border color of the warning state.string#ffe58f
    colorWarningBorderHoverThe hover state border color of the warning state.string#ffd666
    colorWarningHoverThe hover state of the warning color.string#ffd666
    colorWarningTextThe default state of the text in the warning color.string#faad14
    colorWarningTextActiveThe active state of the text in the warning color.string#d48806
    colorWarningTextHoverThe hover state of the text in the warning color.string#ffc53d
    colorWhitePure white color don't changed by themestring#fff
    controlHeightLGLG component heightnumber40
    controlHeightSMSM component heightnumber24
    controlHeightXSXS component heightnumber16
    fontSizeHeading1Font size of h1 tag.number38
    fontSizeHeading2Font size of h2 tag.number30
    fontSizeHeading3Font size of h3 tag.number24
    fontSizeHeading4Font size of h4 tag.number20
    fontSizeHeading5Font size of h5 tag.number16
    fontSizeLGLarge font sizenumber16
    fontSizeSMSmall font sizenumber12
    fontSizeXLSuper large font sizenumber20
    lineHeightLine height of text.number1.5714285714285714
    lineHeightHeading1Line height of h1 tag.number1.2105263157894737
    lineHeightHeading2Line height of h2 tag.number1.2666666666666666
    lineHeightHeading3Line height of h3 tag.number1.3333333333333333
    lineHeightHeading4Line height of h4 tag.number1.4
    lineHeightHeading5Line height of h5 tag.number1.5
    lineHeightLGLine height of large text.number1.5
    lineHeightSMLine height of small text.number1.6666666666666667
    lineWidthBoldThe default line width of the outline class components, such as Button, Input, Select, etc.number2
    motionDurationFastMotion speed, fast speed. Used for small element animation interaction.string0.1s
    motionDurationMidMotion speed, medium speed. Used for medium element animation interaction.string0.2s
    motionDurationSlowMotion speed, slow speed. Used for large element animation interaction.string0.3s
    sizenumber16
    sizeLGnumber24
    sizeMDnumber20
    sizeMSnumber16
    sizeSMnumber12
    sizeXLnumber32
    sizeXSnumber8
    sizeXXLnumber48
    sizeXXSnumber4

    AliasToken

    Inherit all SeedToken and MapToken properties

    Token NameDescriptionTypeDefault Value
    boxShadowControl 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)
    boxShadowSecondaryControl 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)
    boxShadowTertiaryControl 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)
    colorBgContainerDisabledControl the background color of container in disabled state.stringrgba(0,0,0,0.04)
    colorBgTextActiveControl the background color of text in active state.stringrgba(0,0,0,0.15)
    colorBgTextHoverControl the background color of text in hover state.stringrgba(0,0,0,0.06)
    colorBorderBgControl the color of background border of element.string#ffffff
    colorErrorOutlineControl the outline color of input component in error state.stringrgba(255,38,5,0.06)
    colorFillAlterControl the alternative background color of element.stringrgba(0,0,0,0.02)
    colorFillContentControl the background color of content area.stringrgba(0,0,0,0.06)
    colorFillContentHoverControl the style of background color of content area when mouse hovers over it.stringrgba(0,0,0,0.15)
    colorHighlightControl the color of page element when highlighted.string#ff4d4f
    colorIconWeak action. Such as `allowClear` or Alert close buttonstringrgba(0,0,0,0.45)
    colorIconHoverWeak action hover color. Such as `allowClear` or Alert close buttonstringrgba(0,0,0,0.88)
    colorSplitUsed as the color of separator, this color is the same as colorBorderSecondary but with transparency.stringrgba(5,5,5,0.06)
    colorTextDescriptionControl the font color of text description.stringrgba(0,0,0,0.45)
    colorTextDisabledControl the color of text in disabled state.stringrgba(0,0,0,0.25)
    colorTextHeadingControl the font color of heading.stringrgba(0,0,0,0.88)
    colorTextLabelControl the font color of text label.stringrgba(0,0,0,0.65)
    colorTextLightSolidControl the highlight color of text with background color, such as the text in Primary Button components.string#fff
    colorTextPlaceholderControl the color of placeholder text.stringrgba(0,0,0,0.25)
    colorWarningOutlineControl the outline color of input component in warning state.stringrgba(255,215,5,0.1)
    controlInteractiveSizeControl the interactive size of control component.number16
    controlItemBgActiveControl the background color of control component item when active.string#e6f4ff
    controlItemBgActiveDisabledControl the background color of control component item when active and disabled.stringrgba(0,0,0,0.15)
    controlItemBgActiveHoverControl the background color of control component item when hovering and active.string#bae0ff
    controlItemBgHoverControl the background color of control component item when hovering.stringrgba(0,0,0,0.04)
    controlOutlineControl the outline color of input component.stringrgba(5,145,255,0.1)
    controlOutlineWidthControl the outline width of input component.number2
    controlPaddingHorizontalControl the horizontal padding of an element.number12
    controlPaddingHorizontalSMControl the horizontal padding of an element with a small-medium size.number8
    fontSizeIconControl the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.number12
    fontWeightStrongControl the font weight of heading components (such as h1, h2, h3) or selected item.number600
    lineWidthFocusControl the width of the line when the component is in focus state.number3
    linkDecorationControl the text decoration style of a link.undefined | TextDecoration<string | number>none
    linkFocusDecorationControl the text decoration style of a link on focus.undefined | TextDecoration<string | number>none
    linkHoverDecorationControl the text decoration style of a link on mouse hover.undefined | TextDecoration<string | number>none
    marginControl the margin of an element, with a medium size.number16
    marginLGControl the margin of an element, with a large size.number24
    marginMDControl the margin of an element, with a medium-large size.number20
    marginSMControl the margin of an element, with a medium-small size.number12
    marginXLControl the margin of an element, with an extra-large size.number32
    marginXSControl the margin of an element, with a small size.number8
    marginXXLControl the margin of an element, with the largest size.number48
    marginXXSControl the margin of an element, with the smallest size.number4
    opacityLoadingControl the opacity of the loading state.number0.65
    paddingControl the padding of the element.number16
    paddingContentHorizontalControl the horizontal padding of content element.number16
    paddingContentHorizontalLGControl the horizontal padding of content element, suitable for large screen devices.number24
    paddingContentHorizontalSMControl the horizontal padding of content element, suitable for small screen devices.number16
    paddingContentVerticalControl the vertical padding of content element.number12
    paddingContentVerticalLGControl the vertical padding of content element, suitable for large screen devices.number16
    paddingContentVerticalSMControl the vertical padding of content element, suitable for small screen devices.number8
    paddingLGControl the large padding of the element.number24
    paddingMDControl the medium padding of the element.number20
    paddingSMControl the small padding of the element.number12
    paddingXLControl the extra large padding of the element.number32
    paddingXSControl the extra small padding of the element.number8
    paddingXXSControl the extra extra small padding of the element.number4
    screenLGControl the screen width of large screens.number992
    screenLGMaxControl the maximum width of large screens.number1199
    screenLGMinControl the minimum width of large screens.number992
    screenMDControl the screen width of medium screens.number768
    screenMDMaxControl the maximum width of medium screens.number991
    screenMDMinControl the minimum width of medium screens.number768
    screenSMControl the screen width of small screens.number576
    screenSMMaxControl the maximum width of small screens.number767
    screenSMMinControl the minimum width of small screens.number576
    screenXLControl the screen width of extra large screens.number1200
    screenXLMaxControl the maximum width of extra large screens.number1599
    screenXLMinControl the minimum width of extra large screens.number1200
    screenXSControl the screen width of extra small screens.number480
    screenXSMaxControl the maximum width of extra small screens.number575
    screenXSMinControl the minimum width of extra small screens.number480
    screenXXLControl the screen width of extra extra large screens.number1600
    screenXXLMinControl the minimum width of extra extra large screens.number1600

    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 {}.

    import { Button, ConfigProvider, Space } from 'antd';
    import React from 'react';
    
    const App: React.FC = () => (
      <ConfigProvider
        theme={{
          token: {
            // Seed Token
            colorPrimary: '#00b96b',
            borderRadius: 2,
    
            // Alias Token
            colorBgContainer: '#f6ffed',
          },
        }}
      >
        <Space>
          <Button type="primary">Primary</Button>
          <Button>Default</Button>
        </Space>
      </ConfigProvider>
    );
    
    export default App;
    Open on CodeSandboxOpen Sandbox
    import React from 'react';
    import { Button, ConfigProvider, Input, Space, theme } from 'antd';
    
    const App: React.FC = () => (
      <ConfigProvider
        theme={{
          // 1. Use dark algorithm
          algorithm: theme.darkAlgorithm,
    
          // 2. Combine dark algorithm and compact algorithm
          // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
        }}
      >
        <Space>
          <Input placeholder="Please Input" />
          <Button type="primary">Submit</Button>
        </Space>
      </ConfigProvider>
    );
    
    export default App;
    Open on CodeSandboxOpen Sandbox
    import React from 'react';
    import { ConfigProvider, Button, Space, Input, Divider } from 'antd';
    
    const App: React.FC = () => (
      <>
        <ConfigProvider
          theme={{
            components: {
              Button: {
                colorPrimary: '#00b96b',
                algorithm: true, // Enable algorithm
              },
              Input: {
                colorPrimary: '#eb2f96',
                algorithm: true, // Enable algorithm
              }
            },
          }}
        >
          <Space>
            <div style={{ fontSize: 14 }}>Enable algorithm: </div>
            <Input placeholder="Please Input" />
            <Button type="primary">Submit</Button>
          </Space>
        </ConfigProvider>
        <Divider />
        <ConfigProvider
          theme={{
            components: {
              Button: {
                colorPrimary: '#00b96b',
              },
              Input: {
                colorPrimary: '#eb2f96',
              }
            },
          }}
        >
          <Space>
            <div style={{ fontSize: 14 }}>Disable algorithm: </div>
            <Input placeholder="Please Input" />
            <Button type="primary">Submit</Button>
          </Space>
        </ConfigProvider>
      </>
    );
    
    export default App;
    Open on CodeSandboxOpen Sandbox
    import React from 'react';
    import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';
    
    const App: React.FC = () => {
      const [checked, setChecked] = React.useState<boolean>(false);
      const timerRef = React.useRef<ReturnType<typeof setInterval>>();
      React.useEffect(() => {
        timerRef.current = setInterval(() => {
          setChecked((prev) => !prev);
        }, 500);
        return () => {
          if (timerRef.current) {
            clearInterval(timerRef.current);
          }
        };
      }, []);
    
      const nodes = (
        <Flex gap="small">
          <Checkbox checked={checked}>Checkbox</Checkbox>
          <Radio checked={checked}>Radio</Radio>
          <Switch checked={checked} />
        </Flex>
      );
    
      return (
        <Row gutter={[24, 24]}>
          <Col span={24}>{nodes}</Col>
          <Col span={24}>
            <ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>
          </Col>
        </Row>
      );
    };
    
    export default App;
    Open on CodeSandboxOpen Sandbox
    import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
    import React from 'react';
    
    const App: React.FC = () => {
      const [primary, setPrimary] = React.useState('#1677ff');
    
      return (
        <>
          <ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
          <Divider />
          <ConfigProvider
            theme={{
              token: {
                colorPrimary: primary,
              },
            }}
          >
            <Space>
              <Input placeholder="Please Input" />
              <Button type="primary">Submit</Button>
            </Space>
          </ConfigProvider>
        </>
      );
    }
    
    export default App;
    Open on CodeSandboxOpen Sandbox
    import React from 'react';
    import { Button, ConfigProvider, Space } from 'antd';
    
    const App: React.FC = () => (
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#1677ff',
          },
        }}
      >
        <Space>
          <Button type="primary">Theme 1</Button>
          <ConfigProvider
            theme={{
              token: {
                colorPrimary: '#00b96b',
              },
            }}
          >
            <Button type="primary">Theme 2</Button>
          </ConfigProvider>
        </Space>
      </ConfigProvider>
    );
    
    export default App;
    Open on CodeSandboxOpen Sandbox
    import React from 'react';
    import { Button, theme } from 'antd';
    
    const { useToken } = theme;
    
    const App: React.FC = () => {
      const { token } = useToken();
    
      return (
        <div
          style={{
            backgroundColor: token.colorPrimaryBg,
            padding: token.padding,
            borderRadius: token.borderRadius,
            color: token.colorPrimaryText,
            fontSize: token.fontSize,
          }}
        >
          Consume Design Token
        </div>
      );
    };
    
    export default App;
    Open on CodeSandboxOpen Sandbox