Ant Design Theme Customization
SkillMediaCustomize Ant Design theme using Design Tokens and ConfigProvider. Use when adjusting visual styles, colors, spacing, or other theme properties in an Ant Design project.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Ant Design Theme Customization skill
What this skill tells your AI
The instructions your AI receives, as published by ant-design/ant-design in public/.well-known/agent-skills/antd-theme-customization/SKILL.md and read by ahel’s review.
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
- Review the theme documentation at
https://ant.design/docs/react/customize-theme - Use
<ConfigProvider theme={{ token: { ... } }}>to customize global tokens - Use
<ConfigProvider theme={{ components: { Button: { ... } } }}>for component-specific tokens - For dark mode, use
<ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}> - For CSS variable mode, set
<ConfigProvider theme={{ cssVar: true }}>
Key Design Tokens
colorPrimary— primary color (default:#1677ff)colorBgContainer— background color of containersborderRadius— global border radiusfontFamily— font familyfontSize— 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
Signals
- GitHub stars
- 99k
- Forks
- 55k
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
antd-theme-customization- Source
- github.com/ant-design/ant-design