Templates Help Hire Us

Checkout Pro Version

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

Color

Override Light Theme Colors

For any change in colors : src/theme/LightTheme.ts 
                            
import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
const BLUE_THEME: ThemeTypes = {
    name: 'BLUE_THEME',
    dark: false,
    variables: {
        'border-color': '#e0e6eb',
        'border-opacity': 1
    },
    colors: {
        primary: '#00A1FF',
        secondary: '#8965E5',
        info: '#46caeb',
        success: '#00ceb6',
        warning: '#ffae1f',
        error: '#ff6692',
        lightprimary: '#e5f5ff',
        lightsecondary: '#e7e2f3',
        lightsuccess: '#d2f9f4',
        lighterror: '#ffe4ec',
        lightinfo: '#e1f5fa',
        lightwarning: '#fff1cc',
        textPrimary: '#111c2d',
        textSecondary: '#7b8893',
        borderColor: '#e0e6eb',
        containerBg: '#F8FAFD',
        background: '#F8FAFD',
        hoverColor: '#EFF4FA',
        surface: '#fff',
        grey100: '#EAEFF4',
        grey200: '#29343d',
        light: '#EFF4FA',
        muted:'#526b7a'
    }
};

const AQUA_THEME: ThemeTypes = {
    name: 'AQUA_THEME',
    dark: false,
            variables: {
                'border-color': '#e0e6eb',
                'border-opacity': 1
            },
            colors: {
                primary: '#0074BA',
                secondary: '#47D7BC',
                info: '#46caeb',
                success: '#00ceb6',
                warning: '#ffae1f',
                error: '#ff6692',
                lightprimary: '#E5F1F8',
                lightsecondary: '#EDFBF7',
                lightsuccess: '#E6FFFA',
                lighterror: '#FDEDE8',
                lightinfo: '#EBF3FE',
                lightwarning: '#FEF5E5',
                textPrimary: '#111c2d',
                textSecondary: '#7b8893',
                borderColor: '#e5eaef',
                containerBg: '#F8FAFD',
                background: '#F8FAFD',
                hoverColor: '#EFF4FA',
                surface: '#fff',
                grey100: '#EAEFF4',
                grey200: '#29343d',
                light: '#EFF4FA',
                muted:'#526b7a'
            }
        };
        
        const PURPLE_THEME: ThemeTypes = {
            name: 'PURPLE_THEME',
            dark: false,
            variables: {
                'border-color': '#e0e6eb',
                'border-opacity': 1
            },
            colors: {
                primary: '#763EBD',
                secondary: '#95CFD5',
                info: '#46caeb',
                success: '#00ceb6',
                warning: '#ffae1f',
                error: '#ff6692',
                lightprimary: '#F2ECF9',
                lightsecondary: '#EDF8FA',
                lightsuccess: '#E6FFFA',
                lighterror: '#FDEDE8',
                lightinfo: '#EBF3FE',
                lightwarning: '#FEF5E5',
                textPrimary: '#111c2d',
                textSecondary: '#7b8893',
        borderColor: '#e5eaef',
        containerBg: '#F8FAFD',
        background: '#F8FAFD',
        hoverColor: '#EFF4FA',
        surface: '#fff',
        grey100: '#EAEFF4',
        grey200: '#29343d',
        light: '#EFF4FA',
        muted:'#526b7a'
    }
};

const GREEN_THEME: ThemeTypes = {
    name: 'GREEN_THEME',
    dark: false,
    variables: {
        'border-color': '#e0e6eb',
        'border-opacity': 1
    },
    colors: {
        primary: '#0A7EA4',
        secondary: '#CCDA4E',
        info: '#46caeb',
        success: '#00ceb6',
        warning: '#ffae1f',
        error: '#ff6692',
        lightprimary: '#E6F2F6',
        lightsecondary: '#FAFBEF',
        lightsuccess: '#E6FFFA',
        lighterror: '#FDEDE8',
        lightinfo: '#EBF3FE',
        lightwarning: '#FEF5E5',
        textPrimary: '#111c2d',
        textSecondary: '#7b8893',
        borderColor: '#e5eaef',
        containerBg: '#F8FAFD',
        background: '#F8FAFD',
        hoverColor: '#EFF4FA',
        surface: '#fff',
        grey100: '#EAEFF4',
        grey200: '#29343d',
        light: '#EFF4FA',
        muted:'#526b7a'
    }
};

const CYAN_THEME: ThemeTypes = {
    name: 'CYAN_THEME',
    dark: false,
    variables: {
        'border-color': '#e0e6eb',
        'border-opacity': 1
    },
    colors: {
        primary: '#01C0C8',
        secondary: '#FB9678',
        info: '#46caeb',
        success: '#00ceb6',
        warning: '#ffae1f',
        error: '#ff6692',
        lightprimary: '#EBF9FA',
        lightsecondary: '#FFF5F2',
        lightsuccess: '#E6FFFA',
        lighterror: '#FDEDE8',
        lightinfo: '#EBF3FE',
        lightwarning: '#FEF5E5',
        textPrimary: '#111c2d',
        textSecondary: '#7b8893',
        borderColor: '#e5eaef',
        containerBg: '#F8FAFD',
        background: '#F8FAFD',
        hoverColor: '#EFF4FA',
        surface: '#fff',
        grey100: '#EAEFF4',
        grey200: '#29343d',
        light: '#EFF4FA',
        muted:'#526b7a'
    }
};

const ORANGE_THEME: ThemeTypes = {
    name: 'ORANGE_THEME',
    dark: false,
    variables: {
        'border-color': '#e0e6eb',
        'border-opacity': 1
    },
    colors: {
        primary: '#FA896B',
        secondary: '#0074BA',
        info: '#46caeb',
        success: '#00ceb6',
        warning: '#ffae1f',
        error: '#ff6692',
        lightprimary: '#FBF2EF',
        lightsecondary: '#EFF9FF',
        lightsuccess: '#E6FFFA',
        lighterror: '#FDEDE8',
        lightinfo: '#EBF3FE',
        lightwarning: '#FEF5E5',
        textPrimary: '#111c2d',
        textSecondary: '#7b8893',
        borderColor: '#e5eaef',
        containerBg: '#F8FAFD',
        background: '#F8FAFD',
        hoverColor: '#EFF4FA',
        surface: '#fff',
        grey100: '#EAEFF4',
        grey200: '#29343d',
        light: '#EFF4FA',
        muted:'#526b7a'
    }
};

export { BLUE_THEME, AQUA_THEME, ORANGE_THEME, PURPLE_THEME, GREEN_THEME, CYAN_THEME };

Override Dark Theme Colors

For any change in colors : src/theme/DarkTheme.ts 
                            
import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
const DARK_BLUE_THEME: ThemeTypes = {
    name: 'DARK_BLUE_THEME',
    dark: true,
    variables: {
        'border-color': '#333F55',
        'border-opacity': 1
    },
    colors: {
        primary: '#00A1FF',
        secondary: '#8965E5',
        info: '#3CACC8',
        success: '#13DEB9',
        warning: '#FFAE1F',
        error: '#ff6692',
        lightprimary: '#1C3651',
        lightsecondary: '#2A304E',
        lightsuccess: '#1B3C48',
        lighterror: '#4B313D',
        lightinfo: '#274A60',
        lightwarning: '#4D3A2A',
        textPrimary: '#EAEFF4',
        textSecondary: '#7C8FAC',
        borderColor: '#333F55',
        containerBg: '#1A2537',
        background: '#1A2537',
        hoverColor: '#2A3851',
        surface: '#1F2A3D',
        grey100: '#333F55',
        grey200: '#465670',
        light: '#1A2537'
    }
};

const DARK_AQUA_THEME: ThemeTypes = {
    name: 'DARK_AQUA_THEME',
    dark: true,
    variables: {
        'border-color': '#333F55',
        'border-opacity': 1
    },
    colors: {
        primary: '#0074BA',
        secondary: '#47D7BC',
        info: '#3CACC8',
        success: '#13DEB9',
        warning: '#FFAE1F',
        error: '#ff6692',
        lightprimary: '#1C324A',
        lightsecondary: '#0C4339',
        lightsuccess: '#1B3C48',
        lighterror: '#4B313D',
        lightinfo: '#274A60',
        lightwarning: '#4D3A2A',
        textPrimary: '#EAEFF4',
        textSecondary: '#7C8FAC',
        borderColor: '#333F55',
        containerBg: '#1A2537',
        background: '#1A2537',
        hoverColor: '#2A3851',
        surface: '#1F2A3D',
        grey100: '#333F55',
        grey200: '#465670',
        light: '#1A2537'
    }
};

const DARK_PURPLE_THEME: ThemeTypes = {
    name: 'DARK_PURPLE_THEME',
    dark: true,
    variables: {
        'border-color': '#333F55',
        'border-opacity': 1
    },
    colors: {
        primary: '#763EBD',
        secondary: '#95CFD5',
        info: '#3CACC8',
        success: '#13DEB9',
        warning: '#FFAE1F',
        error: '#ff6692',
        lightprimary: '#282C4A',
        lightsecondary: '#09454B',
        lightsuccess: '#1B3C48',
        lighterror: '#4B313D',
        lightinfo: '#274A60',
        lightwarning: '#4D3A2A',
        textPrimary: '#EAEFF4',
        textSecondary: '#7C8FAC',
        borderColor: '#333F55',
        containerBg: '#1A2537',
        background: '#1A2537',
        hoverColor: '#2A3851',
        surface: '#1F2A3D',
        grey100: '#333F55',
        grey200: '#465670',
        light: '#1A2537'
    }
};

const DARK_GREEN_THEME: ThemeTypes = {
    name: 'DARK_GREEN_THEME',
    dark: true,
    variables: {
        'border-color': '#333F55',
        'border-opacity': 1
    },
    colors: {
        primary: '#0A7EA4',
        secondary: '#CCDA4E',
        info: '#3CACC8',
        success: '#13DEB9',
        warning: '#FFAE1F',
        error: '#ff6692',
        lightprimary: '#1D3348',
        lightsecondary: '#282917',
        lightsuccess: '#1B3C48',
        lighterror: '#4B313D',
        lightinfo: '#274A60',
        lightwarning: '#4D3A2A',
        textPrimary: '#EAEFF4',
        textSecondary: '#7C8FAC',
        borderColor: '#333F55',
        containerBg: '#1A2537',
        background: '#1A2537',
        hoverColor: '#2A3851',
        surface: '#1F2A3D',
        grey100: '#333F55',
        grey200: '#465670',
        light: '#1A2537'
    }
};

const DARK_CYAN_THEME: ThemeTypes = {
    name: 'DARK_CYAN_THEME',
    dark: true,
    variables: {
        'border-color': '#333F55',
        'border-opacity': 1
    },
    colors: {
        primary: '#01C0C8',
        secondary: '#FB9678',
        info: '#3CACC8',
        success: '#13DEB9',
        warning: '#FFAE1F',
        error: '#ff6692',
        lightprimary: '#1C3A4B',
        lightsecondary: '#40241C',
        lightsuccess: '#1B3C48',
        lighterror: '#4B313D',
        lightinfo: '#274A60',
        lightwarning: '#4D3A2A',
        textPrimary: '#EAEFF4',
        textSecondary: '#7C8FAC',
        borderColor: '#333F55',
        containerBg: '#1A2537',
        background: '#1A2537',
        hoverColor: '#2A3851',
        surface: '#1F2A3D',
        grey100: '#333F55',
        grey200: '#465670',
        light: '#1A2537'
    }
};

const DARK_ORANGE_THEME: ThemeTypes = {
    name: 'DARK_ORANGE_THEME',
    dark: true,
    variables: {
        'border-color': '#333F55',
        'border-opacity': 1
    },
    colors: {
        primary: '#FA896B',
        secondary: '#0074BA',
        info: '#3CACC8',
        success: '#13DEB9',
        warning: '#FFAE1F',
        error: '#ff6692',
        lightprimary: '#353442',
        lightsecondary: '#082E45',
        lightsuccess: '#1B3C48',
        lighterror: '#4B313D',
        lightinfo: '#274A60',
        lightwarning: '#4D3A2A',
        textPrimary: '#EAEFF4',
        textSecondary: '#7C8FAC',
        borderColor: '#333F55',
        containerBg: '#1A2537',
        background: '#1A2537',
        hoverColor: '#2A3851',
        surface: '#1F2A3D',
        grey100: '#333F55',
        grey200: '#465670',
        light: '#1A2537'
    }
};

export { DARK_BLUE_THEME, DARK_AQUA_THEME, DARK_ORANGE_THEME, DARK_PURPLE_THEME, DARK_GREEN_THEME, DARK_CYAN_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: '#00A1FF',
      secondary: '#8965E5',
      info: '#46caeb',
      success: '#00ceb6',
      warning: '#ffae1f',
      error: '#ff6692',
      lightprimary: '#e5f5ff',
      lightsecondary: '#e7e2f3',
      lightsuccess: '#d2f9f4',
      lighterror: '#ffe4ec',
      lightinfo: '#e1f5fa',
      lightwarning: '#fff1cc',
      textPrimary: '#111c2d',
      textSecondary: '#7b8893',
      borderColor: '#e0e6eb',
      containerBg: '#F8FAFD',
      background: '#F8FAFD',
      hoverColor: '#EFF4FA',
      surface: '#fff',
      grey100: '#EAEFF4',
      grey200: '#29343d',
      light: '#EFF4FA',
      muted:'#526b7a'
  }
};