---
title: "Tailoring Themes in Ant Design v5 with Umi Max"
date: 2023-10-08T17:45:00.000Z
author: Z.SHINCHVEN
tags: [Ant Design, UmiJS, Umi Max]
canonical: https://atlassc.net/2023/10/09/customize-the-theme-of-ant-design-v5-and-umimax
---
## 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:

```ts
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`:

```tsx
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](https://ant.design/docs/react/customize-theme#seedtoken)
- [Ant Design v5 Theme Variables Source](https://github.com/ant-design/ant-design/blob/master/components/theme/interface/alias.ts)

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.