Components

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
asChildbooleanfalse
hasBackgroundbooleantrue
appearance"inherit" | "light" | "dark""inherit"
accentColorenum"indigo"
grayColorenum"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
<Card size="2" style={{ maxWidth: 400 }}>
<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>

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
<Card size="2" style={{ maxWidth: 400 }}>
<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>