テーマの概要については、概要ページをご覧ください。
| プロパティ | 型 | デフォルト値 |
|---|---|---|
asChild | boolean（真偽値） | デフォルト値なし |
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%" |
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>