Templates Help Hire Us

Checkout Pro Version

react React Version angular Angular Version vue VueJs Version next NextJs Version react NuxtJs Version bootstrap Bootstrap Version
Get Pro
All Access Pass

Color

Override Colors (Light / Dark Theme)

For any change in colors : src/theme/DefaultColors.tsx 
                            
primary: {
  main: '#5D87FF',
  light: '#ECF2FF',
  dark: '#4570EA',
},
secondary: {
  main: '#49BEFF',
  light: '#E8F7FF',
  dark: '#23afdb',
},
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',
},
purple: {
  A50: '#EBF3FE',
  A100: '#6610f2',
  A200: '#557fb9',
},
grey: {
  100: '#F2F6FA',
  200: '#EAEFF4',
  300: '#DFE5EF',
  400: '#7C8FAC',
  500: '#5A6A85',
  600: '#2A3547',
},
text: {
  primary: '#2A3547',
  secondary: '#2A3547',
},
action: {
  disabledBackground: 'rgba(73,82,88,0.12)',
  hoverOpacity: 0.02,
  hover: '#f6f9fc',
},
divider: '#e5eaef',
background: {
  default: '#ffffff',
},

Light Theme Variables Settings

For any change in colors : src/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',
    },
  },
},

Dark Theme Variables Settings

For any change in colors : src/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/assets/scss/_variables.scss 
                            
$primary: #1e88e5;
$info: #26c6da;
$danger: #f62d51;
$success: #39c449;
$warning: #ffbc34;
$dark: #343a40;
$light: #eaf2fb;
$secondary: #35363b;

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #f2f7f8 !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #757e85 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #1e2a35 !default;
$black: #000 !default;