Skip to main content

Customize Theme

The design system in this project uses Ant Design and Tailwind CSS for styling and component creation. All the setup for the design system is located in the app/designSystem folder.

Key Components​

There are two main aspects of the design system that you can customize:

  1. Layouts: These components handle the overall structure of pages.
  2. Theme: This controls the visual styling, colors and appearance of the app.

The app/designSystem/layouts/NavigationLayout contains navigation components for:

  • Top bar
  • Left sidebar
  • Mobile navigation bar

Customizing the Theme​

The theme in this project is based on Ant Design and can be customized to match your brand's visual identity. The theme configuration is located in app/designSystem/theme/index.ts. Here's an example of how the theme is structured:

The first thing you may want to do is change the colorPrimary to your brand accent color.

import { theme } from 'antd'

export const Theme = {
  algorithm: theme.defaultAlgorithm,
  token: {
    // Colors
    colorPrimary: 'black',
    colorError: '#ff4d4f',
    colorInfo: '#1677ff',
    colorSuccess: '#52c41a',
    colorWarning: '#faad14',
    colorTextBase: 'black',
    colorLink: 'black',
    colorBgBase: 'white',
    colorBgContainer: 'white',
    colorBorder: '#d4d4d8',
    colorBorderSecondary: '#e4e4e7',
    colorSplit: 'rgba(24, 24, 27, 0.07)',
    // Typography
    fontSize: 14,
    fontSizeHeading1: 38,
    fontSizeHeading2: 30,
    fontSizeHeading3: 24,
    linkDecoration: 'underline',
    //Form
    controlItemBgActive: '#f4f4f5',
    controlOutline: 'rgba(24, 24, 27, 0.1)',
    controlHeight: 36,
    controlHeightSM: 32,
    // Layout
    padding: 16,
    boxShadow:
      '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
    borderRadius: 6,
    lineType: 'solid',
    lineWidth: 1,
    motion: false,
  },
  components: {
    Form: {
      itemMarginBottom: '22px',
    },
    Layout: {
      headerBg: 'white', // topBar background color
      footerBg: 'white', // footer background color
      bodyBg: 'white', // page background color
      siderBg: '#fbfbfb', // leftBar background color
    },
    Menu: {
      activeBarBorderWidth: 0,
      itemHeight: 30,
      //topbar menu items
      horizontalItemSelectedColor: 'black',
      horizontalItemSelectedBg: 'transparent',
      //leftbar menu items
      itemSelectedColor: 'black',
      itemSelectedBg: 'transparent',
      itemActiveBg: 'transparent',
      //topbar and leftbar menu items
      itemHoverColor: 'black',
      itemHoverBg: 'transparent',
      itemColor: '#909090',
      itemBg: 'transparent',
      iconMarginInlineEnd: 8,
      iconSize: 16,
    },
    Button: {
      paddingInlineSM: 11,
      fontWeight: 500,
    },
  },
}

This theme configuration allows you to customize various aspects of the Ant Design components, including colors, typography, form elements, layout, and specific component styles.

To make editing the theme easier, you can use the Ant Design Theme Editor available at https://ant.design/theme-editor. This online tool provides a visual interface for customizing the theme and previewing the changes in real-time.