Default theme viewer
Here's what the theme object looks like with the default values.
Explore
Explore the default theme:
- colorSchemes: Object
- fontSize: Object
- fontFamily: Object
- fontWeight: Object
- focus: Object
- lineHeight: Object
- letterSpacing: Object
- radius: Object
- shadow: Object
- zIndex: Object
- typography: Object
- breakpoints: Object
- components: Object
- cssVarPrefix: "joy"
- getCssVar: f getCssVar()
- spacing: f spacing()
- colorInversionConfig: Object
- vars: Object
- generateCssVars: f generateCssVars()
- unstable_sxConfig: Object
- unstable_sx: f sx()
- getColorSchemeSelector: f ()
- variants: Object
- palette: Object
- shouldSkipGeneratingVar: f shouldSkipGeneratingVar()
- colorInversion: Object
To create your own theme, starts with customizing the theme colors.