OpenParable
Skip to content
← Back to skills

Antd Theme Customization

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

View on GitHub ↗
QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

  1. Open your project in Codex.
  2. Copy and paste the prompt below.
  3. Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/ant-design/ant-design/blob/HEAD/public/.well-known/agent-skills/antd-theme-customization/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/antd-theme-customization, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

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