Search code examples
reactjsantd

Antd V5 Custom Theme for Components

I need my primary color to be a special green color #1bb470

After updating the token properties I still have different components like the Layout and Menu with the default color set to #001529

Why?

Example: Rule

:where(.css-dev-only-do-not-override-154n70z).ant-layout .ant-layout-sider {
    position: relative;
    min-width: 0;
    background: #001529;
    transition: all 0.2s,background 0s;
}

Code Snippet:

<ConfigProvider
  theme={{
    token: {
      // Seed Token
      colorPrimary: '#1bb470',
      colorInfo: '#1bb470',
      fontFamily: 'Lato, sans-serif',
    },
    components: {
      Layout: {
        colorBgHeader: '#fff',
      },
      Menu: {
        colorItemBg: '#fff', // colorBgBase -3% lightness
        colorSubItemBg: '#fff', // colorBgBase -3% lightness
      },
    },
  }}
>
Solution

  • To change Sider color just add siderBg prop inside Layout style config and to change Menu color add darkItemBg:

    <ConfigProvider
  theme={{
    token: {
      ....
    },
    components: {
      Layout: {
        siderBg: "red" // add this
        ...          
      },
      Menu: {
        darkItemBg: "blue" // add this
        ...
      }
    }
  }}
>

    Here is a working codesandbox example.

    You can find a list of all configurable token style settings in section # Design Token at end of each component page: