Default theme viewer
This tree view allows you to explore how the theme object looks like with the default values.
To create your own theme, start by customizing the theme colors.
You can play with the documentation theme object in your browser console,
as the theme variable is exposed on all the documentation pages.
- colorSchemes: Object
- defaultColorScheme: "light"
- font: Object
- fontSize: Object
- fontFamily: Object
- fontWeight: Object
- focus: Object
- lineHeight: Object
- radius: Object
- shadow: Object
- zIndex: Object
- typography: Object
- breakpoints: Object
- components: Object
- cssVarPrefix: "joy"
- getCssVar: f ()
- spacing: f t()
- containerQueries: f a()
- attribute: "data-joy-color-scheme"
- colorSchemeSelector: ":root"
- vars: Object
- generateThemeVars: f generateThemeVars()
- generateStyleSheets: f generateStyleSheets()
- generateSpacing: f ()
- unstable_sxConfig: Object
- unstable_sx: f ()
- getColorSchemeSelector: f ()
- variants: Object
- palette: Object
- shadowRing: "0 0 #000"
- shadowChannel: "21 21 21"
- shadowOpacity: "0.08"
- shouldSkipGeneratingVar: f o()
- applyStyles: f o()