useColorModeValue

useColorModeValueは、提供された値から現在のカラーモードの値を返すカスタムフックです。

The current colorMode is "light"

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

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

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

import { useColorModeValue } from "@workspaces/ui"

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

カラーモードの概要はこちらをご覧ください。