antd-theme-customization

name: antd-theme-customization description: Customize Ant Design theme using Design Tokens and ConfigProvider. Use when adjusting visual styles, colors, spacing, or other theme properties in an Ant Design project.

Ant Design Theme Customization

Customize the visual appearance of Ant Design components using the theme system.

When to Use

• You need to change primary colors, border radius, or other design tokens
• You need to implement dark mode or custom themes
• You need to configure component-specific token overrides
• You need to use the static token extraction or CSS variable mode

Instructions

1. Review the theme documentation at https://ant.design/docs/react/customize-theme
2. Use <ConfigProvider theme={{ token: { ... } }}> to customize global tokens
3. Use <ConfigProvider theme={{ components: { Button: { ... } } }}> for component-specific tokens
4. For dark mode, use <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
5. For CSS variable mode, set <ConfigProvider theme={{ cssVar: true }}>

Key Design Tokens

• colorPrimary — primary color (default: #1677ff)
• colorBgContainer — background color of containers
• borderRadius — global border radius
• fontFamily — font family
• fontSize — base font size

Notes

• Ant Design v5 uses CSS-in-JS; no more Less variable overrides
• Use theme.getDesignToken() to extract computed tokens
• See all available tokens at https://ant.design/docs/react/token