useColorMode

useColorMode is a custom hook that returns the current color mode.

Import

import { useColorMode } from "@yamada-ui/react"

Copied!

Usage

Editable example

const { colorMode, internalColorMode, changeColorMode, toggleColorMode } =
  useColorMode()

return (
  <>
    <Text>
      The current colorMode is "{colorMode}", internal colorMode is "
      {internalColorMode}"
    </Text>

    <Wrap mt="md" gap="md">
      <Button onClick={() => changeColorMode("light")}>Light Mode</Button>
      <Button onClick={() => changeColorMode("dark")}>Dark Mode</Button>
      <Button onClick={() => changeColorMode("system")}>System</Button>
      <Button onClick={toggleColorMode}>
        {colorMode === "light" ? "Switch to Dark" : "Switch to Light"} Mode
      </Button>
    </Wrap>
  </>
)

Copied!

colorMode returns the current light or dark.
internalColorMode returns the current light, dark, or system.

If you want to learn more about color modes, please check here.

Edit this page on GitHub

PrevioususeClipboard NextuseColorModeValue