暗色模式

Chakra 依赖 next-themes 库提供暗黑模式支持。在安装过程中，启动所需的代码片段会通过 CLI 添加到你的项目中。

¥Chakra relies on the next-themes library to provide dark mode support. During the installation process, the snippets required to get started are added to your project via the CLI.

设置

¥Setup

如果你还没有这样做，你可以通过 CLI 将 next-themes 库添加到你的项目中。

¥If you haven't already, you can add the next-themes library to your project via the CLI.

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

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

¥The generated snippets consists of the following:

• ColorModeProvider：组成 next-themes 提供程序组件

• useColorMode：提供当前颜色模式以及切换颜色模式的函数

• useColorModeValue：根据当前颜色模式返回正确的值

• ColorModeButton：可用于切换颜色模式

用法

¥Usage

使用 ColorModeProvider 封装你的应用，并使用 useColorMode 钩子访问和切换颜色模式。

¥Wrap your app with the ColorModeProvider and use the useColorMode hook to access and toggle the color mode.

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>
  )
}

添加暗黑模式切换

¥Adding the dark mode toggle

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

¥Use the ColorModeButton component to toggle the color mode.

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

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

暗黑模式样式

¥Styling dark mode

使用 _dark 条件为暗黑模式设置组件样式。

¥Use the _dark condition to style components for dark mode.

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

or

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

使用语义标记

¥Using semantic tokens

要减少代码编写量，请使用语义标记来为组件设置暗黑模式的样式。这确保了亮模式和夜间模式样式自动且一致地应用。

¥To reduce the amount of code you need to write, use semantic tokens to style components for dark mode. This ensures the light and dark mode styles are applied automatically and consistently.

Chakra 提供了一组语义标记，可用于为暗黑模式设置组件样式。了解更多关于 语义令牌 的信息。

¥Chakra provides a set of semantic tokens that you can use to style components for dark mode. Learn more about semantic tokens.

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

强制暗黑模式

¥Forcing dark mode

元素特定的暗黑模式

¥Element specific dark mode

要强制启用暗黑模式，请在任意父元素或应用的根元素上设置 dark 的 className。

¥To force dark mode, set the dark className on any parent element, or the root element of your application.

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

强制轻量模式也一样，使用 light 类名。

¥The same applied to forcing light mode, use the light className.

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

页面特定暗色模式

¥Page specific dark mode

使用 ColorModeProvider 组件设置页面的暗黑模式。

¥Use the ColorModeProvider component to set the dark mode for a page.

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

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