Theme overview

<Description> Use the Theme component to change the look and feel of your UI. </Description>

Anatomy

The Theme component defines the overall visual look of your application. It can be customized by passing a minimal set of configuration options.

jsx

<Theme
	accentColor="mint"
	grayColor="gray"
	panelBackground="solid"
	scaling="100%"
	radius="full"
>
	<ThemesVolumeControlExample />
</Theme>

A well tuned set of defaults is provided to get you started, but don’t be afraid to play with all of the available options to find the right visual style for your application. Check out the Playground to see what effect each option has.

Variants

Variants are visual variations of a component which are used to create visual hierarchies and communicate relative importance.

Each component offers a different set of variants, though all are designed to be consistent and complimentary with each other.

jsx

<Flex gap="3" align="center">
	<Button variant="classic">
		Get started <ArrowRightIcon />
	</Button>
	<Button variant="solid">
		Get started <ArrowRightIcon />
	</Button>
	<Button variant="soft">
		Get started <ArrowRightIcon />
	</Button>
</Flex>

Examples

Using a combination of component variants alongside customized theme settings allows you to create a multitude of unique-looking interfaces.

For example you could create:

Or any number of differing treatments and styles.

Tokens

Tokens provide direct access to theme values and give you flexibility to build and customize your own themed components.

For all available theme tokens see the source code, or read more about each type of token in the relevant theme pages.

{

  <ThemesLinkCard
    title="Typography"
    desc="Learn how to use and customize the typographic elements of your theme."
    href="/themes/docs/theme/typography"
  />

  <ThemesLinkCard
    title="Spacing"
    desc="Explore the spacing scale and the available scaling options."
    href="/themes/docs/theme/spacing"
  />

  <ThemesLinkCard
    title="Radius"
    desc="Choose the radius setting in your theme that fits your style."
    href="/themes/docs/theme/radius"
  />

  <ThemesLinkCard
    title="Shadows"
    desc="Use elevation, depth and shadows effectively and customize their properties."
    href="/themes/docs/theme/shadows"
  />

  <ThemesLinkCard
    title="Cursors"
    desc="Customizing cursors used for interactive elements."
    href="/themes/docs/theme/cursors"
  />

</Grid>

}