antd-theme-customization

Customize Ant Design v5 themes using ConfigProvider, design tokens, and CSS variables.

99.3k|54.7k|Updated Apr 24, 2015

Search Tags:#css-in-js #themING #ant design #configprovider #reAct #Dark mode #Design tokens

Ready to run

npx skills add https://github.com/ant-design/ant-design --skill antd-theme-customization

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: antd-theme-customization
Source: https://github.com/ant-design/ant-design/tree/main/public/.well-known/agent-skills/antd-theme-customization
Command: npx skills add https://github.com/ant-design/ant-design --skill antd-theme-customization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ant Design v5 replaced Less variables with a CSS-in-JS theme system, leaving developers without a clear path to adjust colors, spacing, typography, or implement dark mode across their applications.

Core Features & Use Cases

Global Token Override: Modify primary colors, border radius, font family, and spacing via the token property in ConfigProvider.
Component-Level Tokens: Target individual components like Button, Input, or Table with component-specific token overrides.
Dark Mode & CSS Variables: Enable dark mode using theme.darkAlgorithm or switch to CSS variable mode for runtime theme switching.
Use Case: A product team needs to align an Ant Design dashboard with their brand palette and add a dark mode toggle. Use this Skill to configure global tokens, override component styles, and wire up the dark algorithm.

Quick Start

Configure the Ant Design ConfigProvider with custom primary color, border radius, and dark mode algorithm for my React application.

Frequently Asked Questions about antd-theme-customization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I customize the primary color in Ant Design v5?▼

Wrap your application with ConfigProvider and pass a theme prop containing token overrides. Set colorPrimary to your brand hex value, and all components using the primary color will update automatically through the CSS-in-JS engine.

How to enable dark mode in Ant Design?▼

Import theme from antd and pass theme.darkAlgorithm as the algorithm property in ConfigProvider. Combine with a state variable to toggle between light and dark modes based on user preference.

Does Ant Design v5 support CSS variables for theming?▼

Yes, set cssVar: true in the ConfigProvider theme prop to generate CSS custom properties. This enables runtime theme switching and integration with external CSS frameworks without re-rendering React components.

Can I override styles for a single Ant Design component?▼

Use the components property in ConfigProvider theme to target specific components. For example, set components.Button.colorPrimary to change only the Button primary color without affecting other components.

Why are my Less variable overrides not working in Ant Design v5?▼

Ant Design v5 migrated from Less to CSS-in-JS, so Less variables like @primary-color no longer apply. Use the ConfigProvider theme tokens instead, which are applied at runtime through the new styling system.