Wraps all or part of a React tree to provide theme configuration.
For an overview of theming see the overview page.
| Prop | Type | Default |
|---|---|---|
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%" |
Wrap a component tree in the Theme component to provide or modify configuration for all children.
<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>
Nest another theme to modify configuration for a specific subtree. Configuration is inherited from the parent.
<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>
Override configuration per component by passing any supported prop directly to that component.
<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>