Color

SaasAble admin with colors defined in the theme's palette. You can find these in the palette.ts file located in specific view folders. For instance, src/themes/.

src/themes/palette.ts

/***************************  DEFAULT - PALETTE  ***************************/

export function buildPalette() {
  ...
  ...
  const lightPalette = {
  ...
    primary: {
      lighter: '#E0E0FF', // Hosting/primary/90 - primary container / primary fixed
      light: '#BDC2FF', // Hosting/primary/80 - primary fixed dim
      main: '#606BDF', // Hosting/primary/40 - primary
      dark: '#3944B8', // Hosting/primary/30 - on primary fixed variant
      darker: '#000668' // Hosting/primary/10 - on primary container / on primary fixed
    },
    ...
  };
...
  const darkPalette = {
  ...
    primary: {
      lighter: '#2C37AC', // Hosting/primary/30 - primary container / on primary fixed variant
      light: '#7A86FB', // Hosting/primary/60 - primary fixed dim
      main: '#BDC2FF', // Hosting/primary/80 - primary
      dark: '#E0E0FF', // Hosting/primary/90 - on primary container / primary fixed
      darker: '#F1EFFF' // Hosting/primary/95 - on primary container / on primary fixed
    },
    ...
  };
  ...
}

The details below contain the theme. for more information check color page

Light mode color

🎨 Primary color

Name	Variable name	Color
primary - Hosting/primary/40	primary.main	#606BDF
primary container / primary fixed - Hosting/primary/90	primary.lighter	#E0E0FF
primary fixed dim - Hosting/primary/80	primary.light	#BDC2FF
on primary fixed variant - Hosting/primary/30	primary.dark	#3944B8
on primary container / on primary fixed - Hosting/primary/10	primary.darker	#000668

🎨 Secondary color

Name	Variable name	Color
secondary - Hosting/secondary/40	secondary.main	#545C78
secondary container / secondary fixed - Hosting/secondary/90	secondary.lighter	#E0E0FF
secondary fixed dim - Hosting/secondary/80	secondary.light	#C3C4E4
on secondary fixed variant - Hosting/secondary/30	secondary.dark	#43455F
on secondary container / on secondary fixed - Hosting/secondary/10	secondary.darker	#171A31

🎨 Error color

Name	Variable name	Color
error - error/40	error.main	#DE3730
error container / error fixed - error/90	error.lighter	#FFEDEA
error fixed dim - error/80	error.light	#FFDAD6
on error fixed variant - error/30	error.dark	#BA1A1A
on error container / on error fixed - error/10	error.darker	#690005

🎨 Warning color

Name	Variable name	Color
warning - warning/40	warning.main	#AE6600
warning container / warning fixed - warning/90	warning.lighter	#FFEEE1
warning fixed dim - warning/80	warning.light	#FFDCBE
on warning fixed variant - warning/30	warning.dark	#8B5000
on warning container / on warning fixed - warning/10	warning.darker	#4A2800

🎨 Success color

Name	Variable name	Color
success - success/40	success.main	#22892F
success container / success fixed - success/90	success.lighter	#C8FFC0
success fixed dim - success/80	success.light	#B6F2AF
on success fixed variant - success/30	success.dark	#006E1C
on success container / on success fixed - success/10	success.darker	#00390A

🎨 Info color

Name	Variable name	Color
info - info/40	info.main	#008394
info container / info fixed - info/90	info.lighter	#D4F7FF
info fixed dim - info/80	info.light	#A1EFFF
on info fixed variant - info/30	info.dark	#006876
on info container / on info fixed - info/10	info.darker	#00363E

🎨 Grey color

Name	Variable name	Color
surface / surface bright - Hosting/neutral/98	grey.50	#FBF8FF
surface container low - Hosting/neutral/96	grey.100	#F5F2FA
surface container - Hosting/neutral/94	grey.200	#EFEDF4
surface container high - Hosting/neutral/92	grey.300	#EAE7EF
surface container highest - Hosting/neutral/90	grey.400	#E4E1E6
surface dim - Hosting/neutral/87	grey.500	#DBD9E0
outline variant - Hosting/neutral variant/80	grey.600	#C7C5D0
outline - Hosting/neutral variant/50	grey.700	#777680
on surface variant - Hosting/neutral variant/30	grey.800	#46464F
on surface - Hosting/neutral/10	grey.900	#1B1B1F

🎨 Text colour

Name	Variable name	Color
on surface - Hosting/neutral/10	text.primary	#1B1B1F
on surface variant - Hosting/neutral variant/30	text.secondary	#46464F
disabled color	text.disabled	#777680

🎨 Common color

Name	Variable name	Color
surface container - Hosting/neutral/94	divider	#EFEDF4
white color	background.default	#FFF
secondary - Hosting/secondary/40	action.hover	alpha(#5A5C78, 0.05)
outline - Hosting/neutral variant/50	action.disabled	alpha(#777680, 0.6)
surface container highest - Hosting/neutral/90	action.disabledBackground	alpha(#E4E1E6, 0.9)

Dark mode color

🎨 Primary color

Name	Variable name	Color
primary - Hosting/primary/80	primary.main	#BDC2FF
primary container / on primary fixed variant - Hosting/primary/30	primary.lighter	#2C37AC
primary fixed dim - Hosting/primary/60	primary.light	#7A86FB
on primary container / primary fixed - Hosting/primary/90	primary.dark	#E0E0FF
on primary container / on primary fixed - Hosting/primary/95	primary.darker	#F1EFFF

🎨 Secondary color

Name	Variable name	Color
secondary - Hosting/secondary/80	secondary.main	#C3C4E4
secondary container / on secondary fixed variant - Hosting/secondary/30	secondary.lighter	#43455F
secondary fixed dim - Hosting/secondary/60	secondary.light	#8D8EAC
on secondary container / secondary fixed - Hosting/secondary/90	secondary.dark	#E0E0FF
on secondary container / on secondary fixed - Hosting/secondary/95	secondary.darker	#F1EFFF

🎨 Error color

Name	Variable name	Color
error - error/80	error.main	#FFDAD6
error container / on error fixed variant - error/30	error.lighter	#BA1A1A
error fixed dim - error/60	error.light	#FF897D
on error container / error fixed - error/90	error.dark	#FFEDEA
on error container / on error fixed - error/95	error.darker	#FFF8F7

🎨 Warning color

Name	Variable name	Color
warning - warning/80	warning.main	#FFDCBE
warning container / on warning fixed variant - warning/30	warning.lighter	#8B5000
warning fixed dim - warning/60	warning.light	#F79300
on warning container / warning fixed - warning/90	warning.dark	#FFEEE1
on warning container / on warning fixed - warning/95	warning.darker	#FFF8F5

🎨 Success color

Name	Variable name	Color
success - success/80	success.main	#B6F2AF
success container / on success fixed variant - success/30	success.lighter	#006E1C
success fixed dim - success/60	success.light	#5DC05E
on success container / success fixed - success/90	success.dark	#C8FFC0
on success container / on success fixed - success/95	success.darker	#ECFFE4

🎨 Info color

Name	Variable name	Color
info - info/80	info.main	#A1EFFF
info container / on info fixed variant - info/30	info.lighter	#006876
info fixed dim - info/60	info.light	#00BCD4
on info container / info fixed - info/90	info.dark	#D4F7FF
on info container / on info fixed - info/95	info.darker	#EEFCFF

🎨 Grey color

Name	Variable name	Color
surface / surface dim - Hosting/neutral/06	grey.50	#141218
surface container low - Hosting/neutral/10	grey.100	#1B1B1F
surface container - Hosting/neutral/12	grey.200	#211F26
surface container high - Hosting/neutral/17	grey.300	#2B2930
surface container highest - Hosting/neutral/22	grey.400	#36343B
surface container lowest - Hosting/neutral/04	grey.500	#0F0D13
outline variant - Hosting/neutral variant/30	grey.600	#46464F
outline - Hosting/neutral variant/60	grey.700	#91909A
on surface variant - Hosting/neutral variant/80	grey.800	#C7C5D0
on surface - Hosting/neutral/90	grey.900	#E4E1E6

🎨 Text color

Name	Variable name	Color
on surface - Hosting/neutral/90	text.primary	#E4E1E6
on surface variant - Hosting/neutral variant/80	text.secondary	#C7C5D0
outline - Hosting/neutral variant/60	text.disabled	#91909A

🎨 Common color

Name	Variable name	Color
surface container - Hosting/neutral/12	divider	#211F26
container lowest - Hosting/neutral/04	background.default	#0F0D13
container lowest - Hosting/neutral/04	background.paper	#0F0D13
secondary - Hosting/secondary/80	action.hover	alpha(#C3C4E4, 0.05)
outline - Hosting/neutral variant/60	action.disabled	alpha(#91909A, 0.6)
surface container highest - Hosting/neutral/22	action.disabledBackground	alpha(#36343B 0.9)