有关主题的概述，请参阅 概述页面.
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
hasBackground | 布尔值 | true |
外观 | "inherit" | "light" | "dark" | "inherit" |
强调色 | 枚举 | "indigo" |
灰色 | 枚举 | "auto" |
面板背景 | "solid" | "translucent" | "translucent" |
圆角 | "none" | "small" | "medium" | "large" | "full" | "medium" |
缩放 | "90%" | "95%" | "100%" | "105%" | "110%" | "100%" |
将组件树包裹在 Theme 组件中，为所有子组件提供或修改配置。
<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>
嵌套另一个主题以修改特定子树的配置。配置从父级继承。
<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>
通过将任何支持的属性直接传递给该组件来覆盖每个组件的配置。
<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>