useColorModeValue

useColorModeValue is a custom hook that returns the value of the current color mode from the provided values.

The current colorMode is "light"

const { colorMode } = useColorMode()
const color = useColorModeValue("green", "red")

return <Text color={color}>The current colorMode is "{colorMode}"</Text>

If you use this code, you need to add "use client" to the top of the file.

Usage

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

import { useColorModeValue } from "@/components/ui"

import { useColorModeValue } from "@workspaces/ui"

const color = useColorModeValue("green", "red")

Color Mode overview is here.