深色模式

Chakra 依赖于next-themes 库来提供深色模式支持。在安装过程中，通过命令行界面 (CLI) 将所需的起始代码片段添加到您的项目中。

设置

如果您尚未安装，可以通过命令行界面 (CLI) 将 next-themes 库添加到您的项目中。

npx @chakra-ui/cli snippet add color-mode

生成的代码片段包含以下内容：

• ColorModeProvider: 封装了 next-themes 的 provider 组件
• useColorMode: 提供当前颜色模式以及用于切换颜色模式的函数
• useColorModeValue: 根据当前颜色模式返回正确的值
• ColorModeButton: 可用于切换颜色模式

用法

使用 ColorModeProvider 封装您的应用程序，并使用 useColorMode hook 来访问和切换颜色模式。

import { ColorModeProvider } from "@/components/ui/color-mode"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider>{children}</ColorModeProvider>
    </ChakraProvider>
  )
}

添加深色模式切换器

使用 ColorModeButton 组件来切换颜色模式。

import { ColorModeButton } from "@/components/ui/color-mode"

export default function Page({ children }: { children: React.ReactNode }) {
  return (
    <>
      <ColorModeButton />
      {children}
    </>
  )
}

深色模式样式

使用 _dark 条件为深色模式下的组件设置样式。

<Box bg={{ base: "white", _dark: "black" }}>
  <Text>Hello</Text>
</Box>

或

<Box bg="white" _dark={{ bg: "black" }}>
  <Text>Hello</Text>
</Box>

使用语义化代币

为了减少您需要编写的代码量，请使用语义化代币为深色模式下的组件设置样式。这确保了浅色和深色模式的样式能够自动且一致地应用。

Chakra 提供了一组语义化代币，可用于为深色模式下的组件设置样式。了解更多关于 语义化代币 的信息。

<Box bg="bg.subtle">
  <Text>Hello</Text>
</Box>

强制深色模式

元素特定深色模式

要强制深色模式，请在任何父元素或应用程序的根元素上设置 dark CSS 类名 (className)。

<Box bg="black" className="dark">
  <Box bg="bg.subtle">
    <Text>Hello</Text>
  </Box>
</Box>

同样适用于强制浅色模式，使用 light CSS 类名 (className)。

<Box bg="white" className="light">
  <Box bg="bg.subtle">
    <Text>Hello</Text>
  </Box>
</Box>

页面特定深色模式

使用 ColorModeProvider 组件来设置页面的深色模式。

<ColorModeProvider forcedTheme="dark">
  <Box bg="black" className="dark">
    <Box bg="bg.subtle">
      <Text>Hello</Text>
    </Box>
  </Box>
</ColorModeProvider>

请遵循 next-themes 指南，了解更多关于 强制颜色模式 的信息。