Color Schemes

This section details how you could customize color schemes for your project.

There are three types of theme in this template at src/theme/themeColors.js file.

1. Light Theme

2. Dark Theme

3. Semi Dark theme

Default Material Color

Material provide color palate to manage template color schemes. Theme default color scheme is defined in following file

src/theme/defaultTheme.js

To update primary, secondary colors, update primary and secondary object value. like:

primary: {
  main: '#6200EE',
  dark: '#3700B3',
  contrastText: '#fff',
},
secondary: {
  main: '#03DAC5',
  dark: '#018786',
  contrastText: '#fff',
},

Custom Colors

There are three types of theme in this template at src/theme/themeColors.js file.

1. Light Theme

2. Dark Theme

3. Semi Dark theme

To update custom colors we have to update above all themes.

To update vertical sidebar color update sidebar object value of theme which you want to apply. like:

sidebar: {
  bgColor: '#fff',
  textColor: 'rgba(0, 0, 0, 0.6)',
  textDarkColor: 'rgba(0, 0, 0, 0.87)',
  textActiveColor: '#6200EE',
  navHoverBgColor: 'rgb(229, 229, 229)',
  navActiveBgColor: 'rgb(239, 229, 253)',
  borderColor: 'rgba(33, 33, 33, 0.08)',
},

To update Horizontal menu color update sidebar object value of theme which you want to apply. like:

horizontalNav: {
  navigationColor: 'rgba(255, 255, 255, 0.74)',
  navigationActiveColor: 'rgba(255, 255, 255, 1)',
  textColor: 'rgba(0, 0, 0, 0.6)',
  textDarkColor: 'rgba(0, 0, 0, 0.87)',
  textActiveColor: '#6200EE',
  menuHoverBgColor: 'rgb(229, 229, 229)',
  menuActiveBgColor: 'rgb(239, 229, 253)',
}

To made any other color change and override update theme overrides at src/theme/themeColors.js