主题
用于强制树状结构的一部分进入亮模式或夜间模式。
import { Button, Stack, Theme } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack align="flex-start">
<Button variant="surface" colorPalette="teal">
Auto Button
</Button>
<Theme p="4" appearance="dark" colorPalette="teal">
<Button variant="surface">Dark Button</Button>
</Theme>
<Theme p="4" appearance="light" colorPalette="teal">
<Button variant="surface">Light Button</Button>
</Theme>
</Stack>
)
}
用法
¥Usage
import { Theme } from "@chakra-ui/react"<Theme appearance="dark">
<div />
</Theme>示例
¥Examples
嵌套
¥Nested
主题可以嵌套，以便将不同的外观应用于树的不同部分。这对于应用全局外观，然后覆盖其中的某些部分非常有用。
¥The theme can be nested to apply different appearances to different parts of the tree. This is useful for applying a global appearance and then overriding some parts of it.
实用信息：我们使用原生 CSS 选择器来实现这一点。
import { Box, Button, Theme } from "@chakra-ui/react"
const Demo = () => {
return (
<Box>
<Box p="8" borderWidth="1px">
Hello Normal <Button>Click me</Button>
<Theme appearance="dark" colorPalette="red">
<Box p="8" borderWidth="1px">
Hello Dark <Button>Click me</Button>
<Theme appearance="light" colorPalette="pink">
<Box p="8" borderWidth="1px">
Hello Light <Button>Click me</Button>
</Box>
</Theme>
</Box>
</Theme>
</Box>
</Box>
)
}
已门户化
¥Portalled
使用 asChild 属性强制显示门户元素，例如弹出窗口和模态框内容。
¥Use the asChild prop to force the appearance of portalled elements like the
popover and modal content.
Naruto is a Japanese manga series written and illustrated by Masashi Kishimoto.
import { Button, Input, Popover, Portal, Text, Theme } from "@chakra-ui/react"
const Demo = () => {
return (
<Popover.Root>
<Popover.Trigger asChild>
<Button size="sm" variant="outline">
Click me
</Button>
</Popover.Trigger>
<Portal>
<Popover.Positioner>
<Popover.Content asChild>
<Theme hasBackground={false} appearance="dark" colorPalette="teal">
<Popover.Arrow />
<Popover.Body spaceY="4">
<Popover.Title fontWeight="medium">Naruto Form</Popover.Title>
<Text>
Naruto is a Japanese manga series written and illustrated by
Masashi Kishimoto.
</Text>
<Input placeholder="Search" />
<Button>Click me</Button>
</Popover.Body>
</Theme>
</Popover.Content>
</Popover.Positioner>
</Portal>
</Popover.Root>
)
}
页面特定颜色模式
¥Page Specific Color Mode
要将页面锁定为特定颜色模式（亮或暗），请使用 Theme 组件封装整个页面。
¥To lock a page to a specific color mode (light or dark), wrap the entire page
with the Theme component.
如果你使用 useColorMode 钩子，你还可以将其与 ColorModeProvider 结合使用。
¥You can also combine it with the ColorModeProvider if you use the
useColorMode hook.
import { ColorModeProvider } from "@/components/ui/color-mode"
import { Theme } from "@chakra-ui/react"
export const ForcedColorMode = ({ children }) => {
return (
<ColorModeProvider forcedTheme="dark">
<Theme appearance="dark">{/* Rest of the page */}</Theme>
</ColorModeProvider>
)
}