ThemeExample
☀️
light
dark
BACKGROUND
base
layer1
layer2
neutral
SEMANTIC × STEP
primary
secondary
danger
warning
success
information
5
10
20
30
40
50
MAIN VARIANTS
lighter
light
main
dark
darker
TEXT
base
secondary
disabled
primary
danger
success
information
ELEVATION
elevationLevel 2
elevationLevel 4
elevationLevel 6
elevationLevel 8
elevationLevel 9
const palette = themeFactory({ light: { primary: { main: '#6366F1' } }, dark: { primary: { main: '#8B5CF6' } }, }); <ThemeProvider customPalette={palette}>