Color
To change primary and secondary color you have to change in 2
files, which is explain below:
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': '#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'
}
};
export { BLUE_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: '#1B84FF',
secondary: '#0cb9c5',
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'
}
};
const DARK_AQUA_THEME: ThemeTypes = {
name: 'DARK_AQUA_THEME',
dark: true,
variables: {
'border-color': '#333F55',
'border-opacity': 1,
},
colors: {
primary: '#0074BA',
secondary: '#47D7BC',
lightprimary: '#103247',
lightsecondary: '#0C4339',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightwarning: '#4D3A2A',
lightinfo:'#223662',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
inputBorder: '#465670',
containerBg: '#171c23',
background: '#192838',
surface: '#152332',
hoverColor: '#333f55',
'on-surface-variant': '#171c23',
grey100: '#333F55',
grey200: '#465670'
}
};
const DARK_PURPLE_THEME: ThemeTypes = {
name: 'DARK_PURPLE_THEME',
dark: true,
variables: {
'border-color': '#333F55',
'border-opacity': 1,
},
colors: {
primary: '#763EBD',
secondary: '#95CFD5',
lightprimary: '#26153C',
lightsecondary: '#09454B',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightwarning: '#4D3A2A',
lightinfo:'#223662',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
inputBorder: '#465670',
containerBg: '#171c23',
background: '#192838',
surface: '#152332',
hoverColor: '#333f55',
'on-surface-variant': '#171c23',
grey100: '#333F55',
grey200: '#465670'
}
};
const DARK_GREEN_THEME: ThemeTypes = {
name: 'DARK_GREEN_THEME',
dark: true,
variables: {
'border-color': '#333F55',
'border-opacity': 1,
},
colors: {
primary: '#0A7EA4',
secondary: '#CCDA4E',
lightprimary: '#05313F',
lightsecondary: '#282917',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightwarning: '#4D3A2A',
lightinfo:'#223662',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
inputBorder: '#465670',
containerBg: '#171c23',
background: '#192838',
surface: '#152332',
hoverColor: '#333f55',
'on-surface-variant': '#171c23',
grey100: '#333F55',
grey200: '#465670'
}
};
const DARK_CYAN_THEME: ThemeTypes = {
name: 'DARK_CYAN_THEME',
dark: true,
variables: {
'border-color': '#333F55',
'border-opacity': 1,
},
colors: {
primary: '#01C0C8',
secondary: '#FB9678',
lightprimary: '#003638',
lightsecondary: '#40241C',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightwarning: '#4D3A2A',
lightinfo:'#223662',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
inputBorder: '#465670',
containerBg: '#171c23',
background: '#192838',
surface: '#152332',
hoverColor: '#333f55',
'on-surface-variant': '#171c23',
grey100: '#333F55',
grey200: '#465670'
}
};
const DARK_ORANGE_THEME: ThemeTypes = {
name: 'DARK_ORANGE_THEME',
dark: true,
variables: {
'border-color': '#333F55',
'border-opacity': 1,
},
colors: {
primary: '#FA896B',
secondary: '#0074BA',
lightprimary: '#402E32',
lightsecondary: '#082E45',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightwarning: '#4D3A2A',
lightinfo:'#223662',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
inputBorder: '#465670',
containerBg: '#171c23',
background: '#192838',
surface: '#152332',
hoverColor: '#333f55',
'on-surface-variant': '#171c23',
grey100: '#333F55',
grey200: '#465670'
}
};
export { DARK_BLUE_THEME, DARK_AQUA_THEME, DARK_ORANGE_THEME, DARK_PURPLE_THEME, DARK_GREEN_THEME, DARK_CYAN_THEME };