# Antd Theme Customization

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

- Skill: `gabrielmoreira/antd-theme-customization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/antd-theme-customization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/antd-theme-customization/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/antd-theme-customization

---


# 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`