Skip to main content


The useColorModeValue hook is a powerful tool in Pearl UI that allows you to dynamically adjust color values based on the current color mode. This is particularly useful for creating responsive designs that adapt to user preferences for light or dark themes.


import { useColorModeValue } from "pearl-ui";

Return value#

The useColorModeValue hook returns a color value as a string, which corresponds to the current color mode.


Here's an example of how you can use useColorModeValue to dynamically adjust color values:

const dynamicColor = useColorModeValue("red", "blue");

In this example, dynamicColor will be "red" in light mode and "blue" in dark mode.


lightColorYesPearlTheme['palette']The color value to use when the app is in light mode
darkColorYesPearlTheme['palette']The color value to use when the app is in dark mode