Tailoring Themes in Ant Design v5 with Umi Max

Overview

Theme customization in UmiJS can be accomplished either via the config file or by utilizing the ConfigProvider.theme in any component. Particularly, employing ConfigProvider within the layouts is a more convenient method as it envelops everything within the app, thereby applying the theme universally. The following sections detail both methodologies.

Config File Method

Utilize UmiJS's config by importing and defining configurations as shown below:

import { defineConfig } from '@umijs/max';

export default defineConfig({
  antd: {
    theme: {
      token: {
        // Seed Token
        colorPrimary: '#00b96b',
        borderRadius: 2,

        // Alias Token
        colorBgContainer: '#f6ffed',
      }
    },
  },
});

ConfigProvider Method

Alternatively, customize the theme within UmiJS's layout component src/layouts/index.tsx or any other component by wrapping it with ConfigProvider:

import { ConfigProvider } from 'antd';
import { Outlet } from 'umi';

export default function Layout() {

  return (
    <ConfigProvider
      theme={{
        token: {
          // Seed Token
          colorPrimary: '#00b96b',
          borderRadius: 2,

          // Alias Token
          colorBgContainer: '#f6ffed',
        },
      }}
    >
      <Outlet />
    </ConfigProvider>
  );
}

If the layout component isn’t located in src/layouts/index.tsx, create a file with this name, then copy and paste the code above into it. UmiJS will employ this file as the layout component. Note that ConfigProvider's theme will supersede the theme in UmiJS's config.

Recommendation: Favor using ConfigProvider since UmiJS does not require a restart upon theme alteration.

Exploring Theme Variables

• Ant Design v5 Theme Variables
• Ant Design v5 Theme Variables Source

The documentation for UmiJS and Umi Max may not provide adequate information on theme customization, especially if you haven’t perused through Ant Design's documentation. A notable discrepancy is the incorrect code example provided.

Furthermore, the TypeScript definition of defineConfig is not insightful. On navigating to the type declaration of defineConfig, you’ll find the theme type as theme?: ({ [x: string]: any } | undefined);, which doesn’t provide the token type or any theme variables, making it a perplexing endeavor.

A thorough examination of Ant Design v5's source code was necessary to comprehend theme customization. Despite UmiJS and Ant Design being well-documented frameworks and UI libraries in the past, the current lack of clear documentation necessitated a substantial time investment to understand how to personalize Ant Design v5 and Umi Max's themes. This article aims to mitigate the time required for others facing similar hurdles.