# Antd Theme Customization

> Antd Theme Customization is an Agent Skill for design published in the ant-design/ant-design repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

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 name: `antd-theme-customization`
- Category: [Design](https://www.openparable.com/skill/design/1)
- Source: https://github.com/ant-design/ant-design/blob/HEAD/public/.well-known/agent-skills/antd-theme-customization/SKILL.md
- Repository: ant-design/ant-design (98,744 GitHub stars when collected)

## SKILL.md

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

---

Source: https://www.openparable.com/skill/design/antd-theme-customization (OpenParable). Cite the canonical URL above.