主题
用于强制树的某个部分显示为浅色或深色模式。
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>
)
}
用法
import { Theme } from "@chakra-ui/react"<Theme appearance="dark">
<div />
</Theme>示例
嵌套
主题可以嵌套以将不同的外观应用于树的不同部分。这对于应用全局外观然后覆盖其中某些部分非常有用。
须知：我们使用原生 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>
)
}
传送门式
使用 asChild prop 来强制弹出框和模态框内容等传送门式元素的显示外观。
火影忍者表单
《火影忍者》是岸本齐史创作和绘制的日本漫画系列。
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>
)
}
页面特定颜色模式
要将页面锁定到特定的颜色模式（浅色或深色），请使用 Theme 组件包装整个页面。
如果您使用 useColorMode hook，您还可以将其与 ColorModeProvider 结合使用。
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>
)
}