颜色模式

Chakra UI 依赖 next-themes 来添加对明暗颜色模式的支持。

¥Chakra UI relies on next-themes to add support for light and dark color mode.

设置

¥Setup

在大多数情况下，你已通过 CLI 在 Provider 组件中安装并设置了它。如果没有，你可以手动安装。

¥In most cases, you have it installed and set up by the CLI in the Provider component. If not, you can install it manually.

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

该代码片段包含一些钩子和组件，使其感觉类似于 Chakra v2。

¥The snippet includes hooks and components that make it feel similar to Chakra v2.

import {
  ColorModeButton,
  DarkMode,
  LightMode,
  useColorMode,
  useColorModeValue,
} from "@/components/ui/color-mode"

useColorMode

useColorMode 钩子返回当前颜色模式以及一个用于切换颜色模式的函数。

¥The useColorMode hook returns the current color mode and a function to toggle the color mode.

"use client"

import { Button } from "@chakra-ui/react"
import { useColorMode } from "@/components/ui/color-mode"

const Demo = () => {
  const { toggleColorMode } = useColorMode()
  return (
    <Button variant="outline" onClick={toggleColorMode}>
      Toggle Mode
    </Button>
  )
}

在应用树中的任何位置调用 toggleColorMode 或 setColorMode 可在颜色模式之间切换。

¥Calling toggleColorMode or setColorMode anywhere in your app tree toggles the color mode from light or dark and vice versa.

useColorModeValue

useColorModeValue 钩子根据当前颜色模式返回一个值。

¥The useColorModeValue hook returns a value based on the current color mode.

签名：

¥Here's the signature:

const result = useColorModeValue("<light-mode-value>", "<dark-mode-value>")

如果颜色模式为 light，则返回值为亮模式的值；如果颜色模式为 dark，则返回值为夜间模式的值。

¥The value returned will be the value of the light mode if the color mode is light, and the value of the dark mode if the color mode is dark.

"use client"

import { Box, Button, Stack } from "@chakra-ui/react"
import { useColorMode, useColorModeValue } from "@/components/ui/color-mode"

const Demo = () => {
  const { toggleColorMode } = useColorMode()

  const bg = useColorModeValue("red.500", "red.200")
  const color = useColorModeValue("white", "gray.800")

  return (
    <Stack align="flex-start" gap="4">
      <Box p="2" bg={bg} color={color}>
        This box&apos;s style will change based on the color mode.
      </Box>
      <Button variant="outline" size="sm" onClick={toggleColorMode}>
        Toggle Mode
      </Button>
    </Stack>
  )
}

水合不匹配

¥Hydration Mismatch

在服务器端渲染 (SSR) 中使用 useColorModeValue 或 useColorMode 时，你可能会注意到页面加载时出现水合不匹配的情况。这是因为颜色模式值是在服务器端计算的。

¥When using useColorModeValue or useColorMode in SSR, you may notice a hydration mismatch when the page is mounted. This is because the color mode value is computed on the server side.

为了避免这种情况，请使用 ClientOnly 组件封装使用 useColorModeValue 的组件，并渲染一个骨架，直到挂载到客户端。

¥To avoid this, use the ClientOnly component to wrap the component that uses useColorModeValue and render a skeleton until mounted on the client side.

"use client"

import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
import { useColorMode } from "@/components/ui/color-mode"
import { LuMoon, LuSun } from "react-icons/lu"

const Demo = () => {
  const { toggleColorMode, colorMode } = useColorMode()
  return (
    <ClientOnly fallback={<Skeleton boxSize="8" />}>
      <IconButton onClick={toggleColorMode} variant="outline" size="sm">
        {colorMode === "light" ? <LuSun /> : <LuMoon />}
      </IconButton>
    </ClientOnly>
  )
}

ColorModeButton

颜色模式代码段内置 ColorModeButton 组件，你可以导入它来渲染一个用于切换颜色模式的图标按钮。

¥The color mode snippet comes with the ColorModeButton component built-in, you can import it to render an icon button that toggles the color mode.

它会在服务器端渲染骨架，在客户端渲染图标。

¥It renders a skeleton on the server side and the icon on the client side.

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

const Demo = () => {
  return <ColorModeButton />
}

强制彩色模式

¥Forced Color Mode

颜色模式代码段内置 LightMode 和 DarkMode 组件，你可以导入它来强制启用颜色模式。

¥The color mode snippet comes with the LightMode and DarkMode components built-in, you can import it to force the color mode.

"use client"

import { Button, HStack } from "@chakra-ui/react"
import { DarkMode, LightMode, useColorMode } from "@/components/ui/color-mode"

const Demo = () => {
  const { toggleColorMode } = useColorMode()
  return (
    <HStack>
      <LightMode>
        <Button size="sm" variant="subtle">
          Light Mode Always
        </Button>
      </LightMode>

      <DarkMode>
        <Button size="sm" variant="subtle">
          Dark Mode Always
        </Button>
      </DarkMode>

      <Button size="sm" variant="subtle" onClick={toggleColorMode}>
        Toggle Mode
      </Button>
    </HStack>
  )
}