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 : theme/LightTheme.ts
import type { ThemeTypes } from "@/types/themeTypes/ThemeType";
const BLUE_THEME: ThemeTypes = {
name: "BLUE_THEME",
dark: false,
variables: {
"border-color": "#e5eaef",
"border-opacity": 1,
},
colors: {
primary: "#0085db",
secondary: "#707a82",
info: "#46caeb",
success: "#4bd08b",
warning: "#f8c076",
error: "#fb977d",
indigo: "#8763da",
lightprimary: "#e5f3fb",
lightinfo: "#e1f5fa",
lightsecondary: "#e7ecf0",
lightsuccess: "#dffff3",
lighterror: "#ffede9",
lightwarning: "#fff6ea",
lightindigo: "#f1ebff",
textPrimary: "#2A3547",
textSecondary: "#2A3547",
borderColor: "#e5eaef",
inputBorder: "#DFE5EF",
containerBg: "#ffffff",
background: "#f0f5f9",
hoverColor: "#f6f9fc",
surface: "#fff",
grey100: "#707a82",
grey200: "#111c2d",
darkbg: "#2a3447",
bglight: "#f5f8fb",
bgdark: "#111c2d",
},
};
export { BLUE_THEME };
Override Dark Theme Colors
For any change in colors : theme/DarkTheme.ts
import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
const DARK_BLUE_THEME: ThemeTypes = {
name: 'DARK_BLUE_THEME',
dark: true,
variables: {
'border-color': '#182D41',
'border-opacity': 1,
},
colors: {
primary: '#0085db',
secondary: '#7C8FAC',
indigo:'#8763DA',
lightprimary: '#1b394f',
lightinfo:'#1a3247',
lightsecondary: '#2f3f4c',
lightsuccess: '#102d35',
lighterror: '#72483d',
lightwarning: '#282b32',
textPrimary: '#EAEFF4',
textSecondary: '#fff',
lightindigo:'#1d233e',
borderColor: '#182D41',
inputBorder: '#465670',
containerBg: '#111C2D',
background: '#16293e',
hoverColor: '#333f55',
surface: '#111C2D',
grey100: '#7C8FAC',
grey200: '#EAEFF4',
darkbg:'#111936',
bglight:'#16293e',
bgdark:'#16293e'
}
};
export { DARK_BLUE_THEME };