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:
1
primary: {
2
  main: '#6200EE',
3
  dark: '#3700B3',
4
  contrastText: '#fff',
5
},
6
secondary: {
7
  main: '#03DAC5',
8
  dark: '#018786',
9
  contrastText: '#fff',
10
},
Copied!
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:
1
sidebar: {
2
  bgColor: '#fff',
3
  textColor: 'rgba(0, 0, 0, 0.6)',
4
  textDarkColor: 'rgba(0, 0, 0, 0.87)',
5
  textActiveColor: '#6200EE',
6
  navHoverBgColor: 'rgb(229, 229, 229)',
7
  navActiveBgColor: 'rgb(239, 229, 253)',
8
  borderColor: 'rgba(33, 33, 33, 0.08)',
9
},
Copied!
To update Horizontal menu color update sidebar object value of theme which you want to apply. like:
1
horizontalNav: {
2
  navigationColor: 'rgba(255, 255, 255, 0.74)',
3
  navigationActiveColor: 'rgba(255, 255, 255, 1)',
4
  textColor: 'rgba(0, 0, 0, 0.6)',
5
  textDarkColor: 'rgba(0, 0, 0, 0.87)',
6
  textActiveColor: '#6200EE',
7
  menuHoverBgColor: 'rgb(229, 229, 229)',
8
  menuActiveBgColor: 'rgb(239, 229, 253)',
9
}
Copied!
To made any other color change and override update theme overrides at  src/theme/themeColors.js 

Structure - Previous

Layouts

Next - Style Customization

Card Radius

Last modified 10mo ago

Copy link

Contents

Default Material Color

Custom Colors