颜色模式

使用 : localStorage 财务报告和审定财务报表 matchMedia。 。 。 .

安装

yarn add @chakra-ui/color-mode

# or

npm i @chakra-ui/color-mode

导入组件

要在您的应用程序中启用此行为, 请将您的应用程序包入 ColorModeProvider 低于 ThemeProvider

import * as React from "react"
import { ColorModeProvider } from "@chakra-ui/color-mode"
import theme from "./theme"

function App({ children }) {
  return (
    <ThemeProvider theme={theme}>
      <ColorModeProvider>{children}</ColorModeProvider>
    </ThemeProvider>
  )
}

那你可以用钩子 useColorMode 在您的申请中.

function Example() {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <header>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </header>
  )
}