useColorModeValue
useColorModeValue is a custom hook that returns the value of the current color mode from the provided values.
Import
import { useColorModeValue } from "@yamada-ui/react"
Usage
Editable example
const { colorMode } = useColorMode() const bg = useColorModeValue("blackAlpha.800", "whiteAlpha.800") const color = useColorModeValue("whiteAlpha.800", "blackAlpha.800") return ( <Box bg={bg} p="md" rounded="md" color={color} transitionProperty="all" transitionDuration="normal" > The current colorMode is "{colorMode}" </Box> )
If you want to learn more about color modes, please check here.
Edit this page on GitHub