Support Templates Hire Us

Check MaterialPro Premium Version

Live Preview
Buy Now

Color

1. Override Colors

For any change in colors : src/utils/theme/DefaultColors.tsx 
                            
success: {
    main: '#13DEB9',
    light: '#E6FFFA',
    dark: '#02b3a9',
    contrastText: '#ffffff',
  },
  info: {
    main: '#539BFF',
    light: '#EBF3FE',
    dark: '#1682d4',
    contrastText: '#ffffff',
  },
  error: {
    main: '#FA896B',
    light: '#FDEDE8',
    dark: '#f3704d',
    contrastText: '#ffffff',
  },
  warning: {
    main: '#FFAE1F',
    light: '#FEF5E5',
    dark: '#ae8e59',
    contrastText: '#ffffff',
  },
To change primary and secondary color you have to change in 2 files, which is explain below:

2. Override Light Theme Colors

For change , go to : src/utils/theme/LightThemeColors.tsx 
                            
{
  name: 'BLUE_THEME',
  palette: {
    primary: {
      main: '#5D87FF',
      light: '#ECF2FF',
      dark: '#4570EA',
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#49BEFF',
      light: '#E8F7FF',
      dark: '#23afdb',
      contrastText: '#ffffff',
    },
  },
},

3. Override Dark Theme Colors

For change , go to : src/utils/theme/DarkThemeColors.tsx 
                            
{
  name: 'BLUE_THEME',
  palette: {
    primary: {
      main: '#5D87FF',
      light: '#253662',
      dark: '#4570EA',
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#49BEFF',
      light: '#1C455D',
      dark: '#23afdb',
      contrastText: '#ffffff',
    },
    background: {
      default: '#2A3447',
      dark: '#2A3547',
      paper: '#2A3447',
    },
  },
},

Override Colors (Light / Dark Theme)

For any change in colors : src/utils/theme/DefaultColors.tsx 
                            
primary: {
  main: "#03c9d7",
  light: "#e5fafb",
  dark: "#05b2bd",
  contrastText: "#ffffff",
},
secondary: {
  main: "#fb9678",
  light: "#fcf1ed",
  dark: "#e67e5f",
  contrastText: "#ffffff",
},
success: {
  main: "#00c292",
  light: "#ebfaf2",
  dark: "#00964b",
  contrastText: "#ffffff",
},