How to add Custom Color

In order to new custom color to the template, you need to follow the steps below:

Suppose you want to add a new customColor bodyColor to the template.

First you need to add type for bodyColor in src/components/theme/types.ts file with other custom colors.

// Palette
interface Palette {
  ...
  customColors: {
    ...
    // New custom color
    bodyColor: string
  }
}
interface PaletteOptions {
  ...
  customColors?: {
    ...
    // New custom color
    bodyColor?: string
  }
}

Now you need to add bodyColor in src/components/theme/mergedTheme.ts like below:

colorSchemes: {
  light: {
    palette: {
      ...
      customColors: {
        bodyColor: '#1E1E1E'
      }
    }
  },
  dark: {
    palette: {
      ...
      customColors: {
        bodyColor: '#F8F8F1'
      }
    }
  }
}

Now follow the common customization steps mentioned on Overview page.