Templates Help Hire Us

Checkout Pro Version

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

Color

Override Light Theme Colors

For any change in colors : theme/LightTheme.ts 
                        
const ORANGE_THEME: ThemeTypes = {
    name: 'ORANGE_THEME',
    dark: false,
    variables: {
        'border-color': '#e5eaef',
        'border-opacity': 1,
    },
    colors: {
        primary: '#fb9678',
        secondary: '#03c9d7',
        info: '#539BFF',
        success: '#05b187',
        accent: '#FFAB91',
        warning: '#FFAE1F',
        error: '#f94d4d',
        lightprimary: '#fce6ed',
        lightsecondary: '#EDFBF7',
        lightsuccess: '#E6FFFA',
        lighterror: '#FDEDE8',
        lightwarning: '#FEF5E5',
        lightinfo:'#EBF3FE',
        textPrimary: '#11142d',
        textSecondary: '#777e89',
        borderColor: '#e5eaef',
        inputBorder: '#DFE5EF',
        containerBg: '#ffffff',
        background: '#f6f6f6',
        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_ORANGE_THEME: ThemeTypes = {
  name: 'DARK_ORANGE_THEME',
  dark: true,
  variables: {
      'border-color': '#333F55',
      'border-opacity': 1,
  },
  colors: {
      primary: '#fb9678',
      secondary: '#03c9d7',
      lightprimary: '#402E32',
      lightsecondary: '#082E45',
      lightsuccess: '#1B3C48',
      lighterror: '#4B313D',
      lightwarning: '#4D3A2A',
      lightinfo:'#223662',
      textPrimary: '#EAEFF4',
      textSecondary: '#7C8FAC',
      borderColor: '#333F55',
      inputBorder: '#465670',
      containerBg: '#171c23',
      background: '#171c23',
      hoverColor: '#333f55',
      surface: '#171c23',
      'on-surface-variant': '#171c23',
      grey100: '#333F55',
      grey200: '#465670'
  }
};

Override Colors (Light / Dark Theme)

For any change in colors : /theme/LightTheme.ts 
                            
const ORANGE_THEME: ThemeTypes = {
  name: 'ORANGE_THEME',
  dark: false,
  variables: {
      'border-color': '#e5eaef',
      'border-opacity': 1,
  },
  colors: {
      primary: '#fb9678',
      secondary: '#03c9d7',
      info: '#539BFF',
      success: '#05b187',
      accent: '#FFAB91',
      warning: '#FFAE1F',
      error: '#f94d4d',
      lightprimary: '#fce6ed',
      lightsecondary: '#EDFBF7',
      lightsuccess: '#E6FFFA',
      lighterror: '#FDEDE8',
      lightwarning: '#FEF5E5',
      lightinfo:'#EBF3FE',
      textPrimary: '#11142d',
      textSecondary: '#777e89',
      borderColor: '#e5eaef',
      inputBorder: '#DFE5EF',
      containerBg: '#ffffff',
      background: '#f6f6f6',
      hoverColor: '#f6f9fc',
      surface: '#fff',
      'on-surface-variant': '#fff',
      grey100: '#F2F6FA',
      grey200: '#EAEFF4'
  }
};