Color Mode

Yamada UI provides features to change styles according to the color mode.

Overview

Yamada UI has built-in support for managing the application's color mode, allowing you to easily switch between light and dark modes. All provided components also support dark mode.

Usage

To apply color mode to Style Props, set an array.

  • Set the value for light mode as the first element.
  • Set the value for dark mode as the last element.
This is Box

Utilities

Yamada UI provides useful custom hooks for color mode.

useColorMode

A custom hook that returns the current color mode.

useColorModeValue

A custom hook that returns the value of the current color mode from the provided values.