Color
SaasAble supports different colors for each theme, with colors defined in the theme's palette. You can find these in the palette.ts file located in specific view folders. For instance, the AI theme colors are defined in src/views/landings/ai/theme/.
/*************************** DEFAULT/AI THEME - PALETTE ***************************/
export default function palette(mode: ThemeMode) {
...
...
const lightPalette = {
primary: {
lighter: '#CCE5FF', // AI/primary/90 - primary container / primary fixed
light: '#92CCFF', // AI/primary/80 - primary fixed dim
main: '#006397', // AI/primary/40 - primary
dark: '#004B73', // AI/primary/30 - on primary fixed variant
darker: '#001D31' // AI/primary/10 - on primary container / on primary fixed
},
...
};
const darkPalette = {
primary: {
lighter: '#004B73', // AI/primary/30 - primary container / on primary fixed variant
light: '#3398DB', // AI/primary/60 - primary fixed dim
main: '#92CCFF', // AI/primary/80 - primary
dark: '#CCE5FF ', // AI/primary/90 - on primary container / primary fixed
darker: '#E7F2FF' // AI/primary/95 - on primary container / on primary fixed
},
...
};
...
}
The details below contain the default theme which is AI theme. for more information check color page
Light mode color
🎨 Primary color
primary - AI/primary/40
primary.main
#006397
primary container / primary fixed - AI/primary/90
primary.lighter
#CCE5FF
primary fixed dim - AI/primary/80
primary.light
#92CCFF
on primary fixed variant - AI/primary/30
primary.dark
#004B73
on primary container / on primary fixed - AI/primary/10
primary.darker
#001D31
🎨 Secondary color
secondary - AI/secondary/40
secondary.main
#4F6070
secondary container / secondary fixed - AI/secondary/90
secondary.lighter
#D3E4F8
secondary fixed dim - AI/secondary/80
secondary.light
#B7C8DB
on secondary fixed variant - AI/secondary/30
secondary.dark
#384858
on secondary container / on primary fixed - AI/secondary/10
secondary.darker
#0B1D2B
🎨 Neutral
surface / surface bright - AI/neutral/98
grey.50
#F9F9FC
surface container low - AI/neutral/96
grey.100
#F1F4F9
surface container - AI/neutral/94
grey.200
#EBEEF3
surface container high - AI/neutral/92
grey.300
#E6E8EE
surface container highest - AI/neutral/90
grey.400
#E2E2E5
surface dim - AI/neutral/87
grey.500
#D7DADF
outline variant - AI/neutral variant/80 (divider)
grey.600
#C2C7CE
outline - AI/neutral variant/50
grey.700
#72787E
on surface variant - AI/neutral variant/30 (textSecondary)
grey.800
#42474E
on surface - AI/neutral/10 (textPrimary)
grey.900
#1A1C1E
Dark mode color
🎨 Primary color
primary - AI/primary/80
primary.main
#92CCFF
primary container / on primary fixed variant - AI/primary/30
primary.lighter
#004B73
primary fixed dim - AI/primary/60
primary.light
#3398DB
on primary container / primary fixed - AI/primary/90
primary.dark
#CCE5FF
on primary container / on primary fixed - AI/primary/95
primary.darker
#E7F2FF
🎨 Secondary color
secondary - AI/secondary/80
secondary.main
#B7C8DB
secondary container / on secondary fixed variant - AI/secondary/30
secondary.lighter
#384858
secondary fixed dim - AI/secondary/60
secondary.light
#8193A4
on secondary container / secondary fixed - AI/secondary/90
secondary.dark
#D3E4F8
on secondary container / on primary fixed - AI/secondary/95
secondary.darker
#E7F2FF
🎨 Neutral
surface / surface dim - AI/neutral/06
grey.50
#101418
surface container low - AI/neutral/10
grey.100
#1A1C1E
surface container - AI/neutral/12
grey.200
#1C2024
surface container high - AI/neutral/17
grey.300
#272A2E
surface container highest - AI/neutral/22
grey.400
#313539
surface container lowest - AI/neutral/04 (backgroundDark)
grey.500
#0B0F12
outline variant - AI/neutral variant/30 (dividerDark)
grey.600
#42474E
outline - AI/neutral variant/60
grey.700
#8C9198
on surface variant - AI/neutral variant/80 (textSecondaryDark)
grey.800
#C2C7CE
on surface - AI/neutral/90 (textPrimaryDark)
grey.900
#E2E2E5
Last updated