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
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',
},
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
Last modified 2yr ago