Templates Help Hire Us

Checkout Pro Version

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

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': '#ebf1f6',
      'border-opacity': 1,
  },
  colors: {
      primary: '#1B84FF',
      secondary: '#43CED7',
      info: '#2CABE3',
      success: '#2CD07E',
      accent: '#FFAB91',
      warning: '#F6C000',
      error: '#F8285A',
      purple:'#725AF2',
      indigo:'#6610f2',
      lightprimary: '#EDF5FD',
      lightsecondary: '#F2FCFC',
      lightsuccess: '#EDFDF2',
      lighterror: '#FFF0F4',
      lightwarning: '#FFFCF0',
      lightinfo: '#E4F5FF',
      textPrimary: '#3A4752',
      textSecondary: '#768B9E',
      borderColor: '#ebf1f6',
      inputBorder: '#DFE5EF',
      containerBg: '#ffffff',
      background: '#eef5f9',
      hoverColor: '#f6f9fc',
      surface: '#fff',
      'on-surface-variant': '#fff',
      grey100: '#F2F6FA',
      grey200: '#EAEFF4'
  }
};

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: '#1B84FF',
      secondary: '#0cb9c5',
      info: '#2CABE3',
      success: '#2CD07E',
      accent: '#FFAB91',
      warning: '#F6C000',
      error: '#F8285A',
      purple:'#725AF2',
      indigo:'#6610f2',
      lightprimary: '#253662',
      lightsecondary: '#1C455D',
      lightsuccess: '#1B3C48',
      lighterror: '#4B313D',
      lightwarning: '#4D3A2A',
      lightinfo:'#223662',
      textPrimary: '#EAEFF4',
      textSecondary: '#7C8FAC',
      borderColor: '#333F55',
      inputBorder: '#465670',
      containerBg: '#2a3447',
      background: '#192838',
      surface: '#152332',
      hoverColor: '#333f55',
      'on-surface-variant': '#2a3447',
      grey100: '#333F55',
      grey200: '#465670'
  }
};

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': '#e5eaef'
  },
  colors: {
      primary: '#1e88e5',
      secondary: '#0cb9c5',
      info: '#539BFF',
      success: '#13DEB9',
      accent: '#FFAB91',
      warning: '#FFAE1F',
      error: '#FA896B',
      lightprimary: '#f5fcfd',
      lightsecondary: '#E8F7FF',
      lightsuccess: '#E6FFFA',
      lighterror: '#FDEDE8',
      lightwarning: '#FEF5E5',
      lightinfo: '#ebf3fe',
      textPrimary: '#2A3547',
      textSecondary: '#2A3547',
      borderColor: '#e5eaef',
      inputBorder: '#DFE5EF',
      containerBg: '#ffffff',
      background: '#eef5f9',
      hoverColor: '#f6f9fc',
      surface: '#fff',
      'on-surface-variant': '#fff',
      grey100: '#F2F6FA',
      grey200: '#EAEFF4',
      darkbg:'#2a3447'
  }
};