Skip to main content


The useTheme hook is a powerful tool that allows you to access the currently active theme object, the active color mode, and provides a function to switch the active color mode. This hook is essential for dynamically adjusting the appearance of your application based on the user's preferred color scheme.


import { useTheme } from "pearl-ui";

Return Values#

The useTheme hook returns an object containing the following properties:

themePearlThemeThe theme configuration object for the currently active color mode.
colorMode"light" |"dark"The currently active color mode.
toggleColorMode() => voidA function that toggles the active color mode between light and dark.
switchColorMode(mode: "light" | "dark" | "system") => voidA function that allows you to switch the active color mode to a specific mode.

How to Use#

Here's an example of how you can use the useTheme hook in your application:

const { theme, colorMode, toggleColorMode, switchColorMode } = useTheme();