Support Templates Hire Us

Check Modernize 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': '#e5eaef',
      'border-opacity': 1,
  },
  colors: {
      primary: '#5D87FF',
      secondary: '#49BEFF',
      info: '#539BFF',
      success: '#13DEB9',
      accent: '#FFAB91',
      warning: '#FFAE1F',
      error: '#FA896B',
      lightprimary: '#ECF2FF',
      lightsecondary: '#E8F7FF',
      lightsuccess: '#E6FFFA',
      lighterror: '#FDEDE8',
      lightinfo:'#EBF3FE',
      lightwarning: '#FEF5E5',
      textPrimary: '#2A3547',
      textSecondary: '#2A3547',
      borderColor: '#e5eaef',
      inputBorder: '#DFE5EF',
      containerBg: '#ffffff',
      background: '#ffffff',
      hoverColor: '#f6f9fc',
      surface: '#fff',
      'on-surface-variant': '#fff',
      grey100: '#F2F6FA',
      grey200: '#EAEFF4'
  }
};
                        
                        export { BLUE_THEME, AQUA_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: '#5D87FF',
      secondary: '#49BEFF',
      info: '#539BFF',
      success: '#13DEB9',
      accent: '#FA896B',
      warning: '#FFAE1F',
      error: '#FA896B',
      lightprimary: '#253662',
      lightsecondary: '#1C455D',
      lightsuccess: '#1B3C48',
      lighterror: '#4B313D',
      lightinfo:'#223662',
      lightwarning: '#4D3A2A',
      textPrimary: '#EAEFF4',
      textSecondary: '#7C8FAC',
      borderColor: '#333F55',
      inputBorder: '#465670',
      containerBg: '#2a3447',
      background: '#2a3447',
      hoverColor: '#333f55',
      surface: '#2a3447',
      'on-surface-variant': '#2a3447',
      grey100: '#333F55',
      grey200: '#465670'
  }
};

Override Colors (Light / Dark Theme)

For any change in colors : /theme/LightTheme.ts 
                            
const PurpleTheme: ThemeTypes = {
  name: 'PurpleTheme',
  dark: false,
  variables: {
      'border-color': '#eeeeee',
      'carousel-control-size': 10
  },
  colors: {
        primary: '#5D87FF',
        secondary: '#49BEFF',
        info: '#539BFF',
        success: '#13DEB9',
        accent: '#FFAB91',
        warning: '#FFAE1F',
        error: '#FA896B',
        muted:'#5a6a85',
        lightprimary: '#ECF2FF',
        lightsecondary: '#E8F7FF',
        lightsuccess: '#E6FFFA',
        lighterror: '#FDEDE8',
        lightwarning: '#FEF5E5',
        textPrimary: '#2A3547',
        textSecondary: '#2A3547',
        borderColor: '#e5eaef',
        inputBorder: '#000',
        containerBg: '#ffffff',
        hoverColor: '#f6f9fc',
        surface: '#fff',
        'on-surface-variant': '#fff',
        grey100: '#F2F6FA',
        grey200: '#EAEFF4'
    }
};