Support Templates Hire Us

Check MatDash Premium Version

Live Preview
Buy Now

Color

Override Light Theme Colors

For any change in colors : theme/LightTheme.ts 
                        
const BLUE_THEME: ThemeTypes = {
  name: 'BLUE_THEME',
  dark: false,
  variables: {
      'border-color': '#e0e6eb',
      'border-opacity': 1
  },
  colors: {
      primary: '#635BFF',
      secondary: '#14E9E2',
      info: '#46caeb',
      success: '#36c76c',
      warning: '#ffd648',
      error: '#ff6692',
      lightprimary: '#D5D3FC',
      lightsecondary: '#D0FBF9',
      lightsuccess: '#E1F7E9',
      lighterror: '#FFD9E4',
      lightinfo: '#DAF4FB',
      lightwarning: '#FFF7DA',
      textPrimary: '#0a2540',
      textSecondary: '#7b8893',
      borderColor: '#e0e6eb',
      containerBg: '#ffffff',
      background: '#F4F7FB',
      hoverColor: '#f6f9fc',
      surface: '#fff',
      grey100: '#EAEFF4',
      grey200: '#29343d',
      light: '#EFF4FA',
      muted:'#526b7a'
  }
};

export { BLUE_THEME };

Override Dark Theme Colors

For any change in colors : theme/DarkTheme.ts 
                    
const DARK_BLUE_THEME: ThemeTypes = {
  name: 'DARK_BLUE_THEME',
  dark: true,
  variables: {
      'border-color': '#333F55',
      'border-opacity': 1,
  },
  colors: {
      primary: '#635BFF',
      secondary: '#14E9E2',
      info: '#3CACC8',
      success: '#13DEB9',
      warning: '#FFAE1F',
      error: '#ff6692',
      lightprimary: '#29305F',
      lightsecondary: '#194D59',
      lightsuccess: '#1B3C48',
      lighterror: '#4B313D',
      lightinfo:'#274A60',
      lightwarning: '#4D3A2A',
      textPrimary: '#EAEFF4',
      textSecondary: '#7C8FAC',
      borderColor: '#333F55',
      containerBg: '#1A2537',
      background: '#1F2A3D',
      hoverColor: '#333f55',
      surface: '#1a2537',
      grey100: '#333F55',
      grey200: '#465670',
      light: '#1F2A3D'
  }
};

export { BLUE_THEME };

Override Colors (Light / Dark Theme)

For any change in colors : /theme/LightTheme.ts 
                            
const BLUE_THEME: ThemeTypes = {
  name: 'BLUE_THEME',
  dark: false,
  variables: {
      'border-color': '#e0e6eb',
      'border-opacity': 1
  },
  colors: {
      primary: '#635BFF',
      secondary: '#14E9E2',
      info: '#46caeb',
      success: '#36c76c',
      warning: '#ffd648',
      error: '#ff6692',
      lightprimary: '#D5D3FC',
      lightsecondary: '#D0FBF9',
      lightsuccess: '#E1F7E9',
      lighterror: '#FFD9E4',
      lightinfo: '#DAF4FB',
      lightwarning: '#FFF7DA',
      textPrimary: '#0a2540',
      textSecondary: '#7b8893',
      borderColor: '#e0e6eb',
      containerBg: '#ffffff',
      background: '#F4F7FB',
      hoverColor: '#f6f9fc',
      surface: '#fff',
      grey100: '#EAEFF4',
      grey200: '#29343d',
      light: '#EFF4FA',
      muted:'#526b7a'
  }
};