Use the Theme component to quickly change the look and feel of your UI.
The Theme component defines the overall visual look of your application, it can be customized by passing a minimal set of configuration options.
<Theme
accentColor="cyan"
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.
The accent color of primary buttons, links and interactive elements.
The shade of gray applied to borders, text and non-interactive elements.
Whether to apply a solid color, or use a translucent effect on panel elements.
The amount of border radius applied to themed elements.
The color scheme of the theme (typically referred to as light and dark mode)
The uniform scaling applied to the UI across the entire theme.
Variants are visual variations of a component, they 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.
<Flex gap="3" align="center">
<Button variant="solid">
Get started <ArrowRightIcon />
</Button>
<Button variant="soft">
Get started <ArrowRightIcon />
</Button>
<Button variant="ghost">
Get started <ArrowRightIcon />
</Button>
</Flex>
Using a combination of component variants alongside customized theme settings allows you to create a multitude of unique looking interfaces.