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': '#e0e6eb',
'border-opacity': 1
},
colors: {
primary: '#635BFF',
secondary: '#16CDC7',
info: '#46caeb',
success: '#36c76c',
warning: '#ffd648',
error: '#ff6692',
lightprimary: '#DDDBFF',
lightsecondary: '#A6F7F5',
lightsuccess: '#E1F7E9',
lighterror: '#FFCCDB',
lightinfo: '#DAF4FB',
lightwarning: '#FFF9E5',
textPrimary: '#29343D',
textSecondary: '#98A4AE',
borderColor: '#e0e6eb',
containerBg: '#ffffff',
background: '#F4F7FB',
hoverColor: '#f6f9fc',
surface: '#fff',
grey100: '#F6F7F9',
grey200: '#29343d',
darkgray: '#0a2540',
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: '#539BFF',
success: '#13DEB9',
warning: '#FFAE1F',
error: '#ff6692',
lightprimary: '#EFF9FF',
lightsecondary: '#EDFBF7',
lightsuccess: '#E6FFFA',
lighterror: '#FDEDE8',
lightinfo: '#EBF3FE',
lightwarning: '#FEF5E5',
textPrimary: '#29343D',
textSecondary: '#98A4AE',
borderColor: '#e5eaef',
containerBg: '#ffffff',
background: '#F4F7FB',
hoverColor: '#f6f9fc',
surface: '#fff',
grey100: '#F6F7F9',
grey200: '#29343d',
darkgray: '#0a2540',
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: '#539BFF',
success: '#13DEB9',
warning: '#FFAE1F',
error: '#ff6692',
lightprimary: '#F2ECF9',
lightsecondary: '#EDF8FA',
lightsuccess: '#E6FFFA',
lighterror: '#FDEDE8',
lightinfo: '#EBF3FE',
lightwarning: '#FEF5E5',
textPrimary: '#29343D',
textSecondary: '#98A4AE',
borderColor: '#e5eaef',
containerBg: '#ffffff',
background: '#F4F7FB',
hoverColor: '#f6f9fc',
surface: '#fff',
grey100: '#F6F7F9',
grey200: '#29343d',
darkgray: '#0a2540',
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: '#539BFF',
success: '#13DEB9',
warning: '#FFAE1F',
error: '#ff6692',
lightprimary: '#F4F9FB',
lightsecondary: '#FAFBEF',
lightsuccess: '#E6FFFA',
lighterror: '#FDEDE8',
lightinfo: '#EBF3FE',
lightwarning: '#FEF5E5',
textPrimary: '#29343D',
textSecondary: '#98A4AE',
borderColor: '#e5eaef',
containerBg: '#ffffff',
background: '#F4F7FB',
hoverColor: '#f6f9fc',
surface: '#fff',
grey100: '#F6F7F9',
grey200: '#29343d',
darkgray: '#0a2540',
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: '#539BFF',
success: '#13DEB9',
warning: '#FFAE1F',
error: '#ff6692',
lightprimary: '#EBF9FA',
lightsecondary: '#FFF5F2',
lightsuccess: '#E6FFFA',
lighterror: '#FDEDE8',
lightinfo: '#EBF3FE',
lightwarning: '#FEF5E5',
textPrimary: '#29343D',
textSecondary: '#98A4AE',
borderColor: '#e5eaef',
containerBg: '#ffffff',
background: '#F4F7FB',
hoverColor: '#f6f9fc',
surface: '#fff',
grey100: '#F6F7F9',
grey200: '#29343d',
darkgray: '#0a2540',
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: '#539BFF',
success: '#13DEB9',
warning: '#FFAE1F',
error: '#ff6692',
lightprimary: '#FBF2EF',
lightsecondary: '#EFF9FF',
lightsuccess: '#E6FFFA',
lighterror: '#FDEDE8',
lightinfo: '#EBF3FE',
lightwarning: '#FEF5E5',
textPrimary: '#29343D',
textSecondary: '#98A4AE',
borderColor: '#e5eaef',
containerBg: '#ffffff',
background: '#F4F7FB',
hoverColor: '#f6f9fc',
surface: '#fff',
grey100: '#F6F7F9',
grey200: '#29343d',
darkgray: '#0a2540',
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: '#635BFF',
secondary: '#14E9E2',
info: '#3CACC8',
success: '#13DEB9',
warning: '#FFAE1F',
error: '#ff6692',
lightprimary: '#29305F',
lightsecondary: '#194D59',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightinfo: '#274A60',
lightwarning: '#4D3A2A',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
containerBg: '#1A2537',
background: '#1F2A3D',
hoverColor: '#333f55',
surface: '#1a2537',
grey100: '#333F55',
grey200: '#465670',
light: '#1F2A3D',
muted: '#babfc3',
darkgray: '#404A5A'
}
};
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: '#103247',
lightsecondary: '#0C4339',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightinfo: '#274A60',
lightwarning: '#4D3A2A',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
containerBg: '#1A2537',
background: '#1F2A3D',
hoverColor: '#333f55',
surface: '#1a2537',
grey100: '#333F55',
grey200: '#465670',
light: '#1F2A3D',
muted: '#babfc3',
darkgray: '#404A5A'
}
};
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: '#26153C',
lightsecondary: '#09454B',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightinfo: '#274A60',
lightwarning: '#4D3A2A',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
containerBg: '#1A2537',
background: '#1F2A3D',
hoverColor: '#333f55',
surface: '#1a2537',
grey100: '#333F55',
grey200: '#465670',
light: '#1F2A3D',
muted: '#babfc3',
darkgray: '#404A5A'
}
};
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: '#05313F',
lightsecondary: '#282917',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightinfo: '#274A60',
lightwarning: '#4D3A2A',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
containerBg: '#1A2537',
background: '#1F2A3D',
hoverColor: '#333f55',
surface: '#1a2537',
grey100: '#333F55',
grey200: '#465670',
light: '#1F2A3D',
muted: '#babfc3',
darkgray: '#404A5A'
}
};
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: '#003638',
lightsecondary: '#40241C',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightinfo: '#274A60',
lightwarning: '#4D3A2A',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
containerBg: '#1A2537',
background: '#1F2A3D',
hoverColor: '#333f55',
surface: '#1a2537',
grey100: '#333F55',
grey200: '#465670',
light: '#1F2A3D',
muted: '#babfc3',
darkgray: '#404A5A'
}
};
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: '#402E32',
lightsecondary: '#082E45',
lightsuccess: '#1B3C48',
lighterror: '#4B313D',
lightinfo: '#274A60',
lightwarning: '#4D3A2A',
textPrimary: '#EAEFF4',
textSecondary: '#7C8FAC',
borderColor: '#333F55',
containerBg: '#1A2537',
background: '#1F2A3D',
hoverColor: '#333f55',
surface: '#1a2537',
grey100: '#333F55',
grey200: '#465670',
light: '#1F2A3D',
muted: '#babfc3',
darkgray: '#404A5A'
}
};
export { DARK_BLUE_THEME, DARK_AQUA_THEME, DARK_ORANGE_THEME, DARK_PURPLE_THEME, DARK_GREEN_THEME, DARK_CYAN_THEME };