Mastering Dynamic Themes in Ant Design V5: From Global Algorithms to Local Customizations

The author, a designer at Ant Group, writes for both designers and front‑end developers, showing how Ant Design V5’s theming can be standardized for custom themes and demonstrating the limits of V5.

Ant Design V5 has been released for several months. The design‑development team upgraded six business applications/components/sites to V5, all supporting light/dark theme switching, with impressive results in scenarios demanding strong theme customization.

Practical Use Cases – Extension and Productization of V4

Because Ant Design V5 uses a CSS‑in‑JS solution, all dynamic theme configurations become runtime settings, expanding from a single primary color to variables such as border radius, font, and shadow. The official documentation already shows the basic usage; here we focus on productized applications.

Using Ant Design’s Theme Editor, designers can easily create an overall style and preview it in real time.

Designers then import the theme into Kitchen, consuming theme tokens directly and dragging components with the custom theme applied.

Advanced Use Cases ❶: Custom Theme Algorithms

Ant Design’s token system differs from most token systems by incorporating an algorithm that generates a set of variables from base variables and derived rules. This enables custom dark‑mode algorithms, such as the “studioDarkAlgorithm” shown below.

<code>import { theme } from 'antd';
import type { MappingAlgorithm } from 'antd/es/config-provider/context';

// Define studio dark mode algorithm
export const studioDarkAlgorithm: MappingAlgorithm = (seedToken, mapToken) => {
  // Use Ant Design's default dark algorithm for base tokens
  const baseToken = theme.darkAlgorithm(seedToken, mapToken);

  return {
    ...baseToken,
    colorBgLayout: '#20252b', // Layout background
    colorBgContainer: '#282c34', // Component container background
    colorBgElevated: '#32363e', // Elevated container background
  };
};

// Integrate in application
const Container = () => {
  return (
    <ConfigProvider theme={{ algorithm: studioDarkAlgorithm }}>
      ...
    </ConfigProvider>
  );
};</code>

The result shows a distinct dark theme with stable visual gradients, avoiding common dark‑mode pitfalls.

Advanced Use Cases ❷: Partial Theme Customization

While global algorithms adjust overall style, partial theme customization allows multiple themes on the same screen. In V5, CSS‑in‑JS makes it easy to display both light and dark components side by side, as demonstrated in ProEditor, TechUI Studio, and the Theme Previewer.

<code>import { ConfigProvider, theme } from 'antd';

export default () => {
  return (
    <div>
      {/* Dark mode for Toolbar */}
      <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
        <Toolbar />
      </ConfigProvider>
      {/* Remaining parts default to light mode */}
      <ProTableEditor style={{ height: 'calc(100vh - 40px)' }} />
    </div>
  );
};</code>

This approach greatly enhances styling flexibility, enabling a single dark‑theme algorithm to support various visual scenarios without modifying Ant Design’s core styles.

Advanced Use Cases ❸: Component‑Level Style Customization

Component‑level theming becomes straightforward with ConfigProvider. The example below customizes Popover text color, Checkbox colors, and Button primary color using the token system.

<code>import { theme, Popover, Checkbox, Button, ConfigProvider } from 'antd';

export default function App() {
  const { token } = theme.useToken();
  return (
    <ConfigProvider
      theme={{
        components: {
          Popover: { colorText: token.colorTextLightSolid },
          Checkbox: { colorPrimary: token['blue-7'], colorText: token.colorTextLightSolid },
          Button: { colorPrimary: token['blue-7'] },
        },
      }}
    >
      ...business components...
    </ConfigProvider>
  );
}</code>

This yields highly flexible component styling that was difficult to achieve in V4.

Advanced Use Cases ❹: Component Composition

V5 simplifies combining components such as a dark‑mode Modal containing a Table. By nesting ConfigProvider and adjusting the

colorBgContainer

token to

colorBgElevated

, the table inherits the modal’s background, producing a cohesive appearance.

<code>import React from 'react';
import { Modal, ConfigProvider, theme } from 'antd';
import Table from './Table';

const App: React.FC = () => {
  const { token } = theme.useToken();
  return (
    <div style={{ background: token.colorBgLayout, padding: 24, height: '100vh' }}>
      <Modal open={true} width={800} title="Table in Modal">
        <ConfigProvider theme={{ token: { colorBgContainer: token.colorBgElevated } }}>
          <Table />
        </ConfigProvider>
      </Modal>
      <Table />
    </div>
  );
};

export default App;</code>

Such nesting achieves visual consistency that required extensive hacks in V4.

Overall, the dynamic CSS‑in‑JS capabilities and unique token system of Ant Design V5 position it at the forefront of design system technology worldwide. Future work will extend these concepts to semantic DOM classes, component‑level tokens, stylish themes, Theme Editor 2.0, and application‑level CSS‑in‑JS solutions.