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