antd-theme-customization

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.

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.

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.

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.

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.