Theme

Wraps all or part of a React tree to provide theme configuration.

API Reference

For an overview of theming see the overview page.

PropTypeDefault
asChild
boolean
No default value
hasBackground
boolean
true
appearance
"inherit" | "light" | "dark"
"inherit"
accentColor
enum
"indigo"
grayColor
enum
"auto"
panelBackground
"solid" | "translucent"
"translucent"
radius
"none" | "small" | "medium" | "large" | "full"
"medium"
scaling
"90%" | "95%" | "100%" | "105%" | "110%"
"100%"

Examples

Basic configuration

Wrap a component tree in the Theme component to provide or modify configuration for all children.

Feedback
<Box maxWidth="400px">
<Card size="2">
<Flex direction="column" gap="3">
<Grid gap="1">
<Text as="div" weight="bold" size="2" mb="1">
Feedback
</Text>
<TextArea placeholder="Write your feedback…" />
</Grid>
<Flex asChild justify="between">
<label>
<Text color="gray" size="2">
Attach screenshot?
</Text>
<Switch size="1" defaultChecked />
</label>
</Flex>
<Grid columns="2" gap="2">
<Button variant="surface">Back</Button>
<Button>Send</Button>
</Grid>
</Flex>
</Card>
</Box>

Nesting

Nest another theme to modify configuration for a specific subtree. Configuration is inherited from the parent.

Global
Feedback
Child
Feedback
Grandchild
Feedback
<Card size="2">
<Flex gap="6">
<Flex direction="column" gap="3">
<Heading as="h5" size="2">
Global
</Heading>
<Grid gap="1">
<Text as="div" weight="bold" size="2" mb="1">
Feedback
</Text>
<TextArea placeholder="Write your feedback…" />
</Grid>
<Button>Send</Button>
</Flex>
<Theme accentColor="cyan" radius="full">
<Card size="2">
<Flex gap="6">
<Flex direction="column" gap="3">
<Heading as="h5" size="2">
Child
</Heading>
<Grid gap="1">
<Text as="div" weight="bold" size="2" mb="1">
Feedback
</Text>
<TextArea placeholder="Write your feedback…" />
</Grid>
<Button>Send</Button>
</Flex>
<Theme accentColor="orange">
<Card size="2">
<Flex direction="column" gap="3">
<Heading as="h5" size="2">
Grandchild
</Heading>
<Grid gap="1">
<Text as="div" weight="bold" size="2" mb="1">
Feedback
</Text>
<TextArea placeholder="Write your feedback…" />
</Grid>
<Button>Send</Button>
</Flex>
</Card>
</Theme>
</Flex>
</Card>
</Theme>
</Flex>
</Card>

Component overrides

Override configuration per component by passing any supported prop directly to that component.

Feedback
<Box maxWidth="400px">
<Card size="2">
<Flex direction="column" gap="3">
<Grid gap="1">
<Text as="div" weight="bold" size="2" mb="1">
Feedback
</Text>
<TextArea placeholder="Write your feedback…" />
</Grid>
<Flex asChild justify="between">
<label>
<Text color="gray" size="2">
Attach screenshot?
</Text>
<Switch size="1" color="orange" radius="full" defaultChecked />
</label>
</Flex>
<Grid columns="2" gap="2">
<Button variant="surface">Back</Button>
<Button color="cyan" radius="full">
Send
</Button>
</Grid>
</Flex>
</Card>
</Box>