useTheme

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

import { useTheme } from "pearl-ui";

Return Values

The useTheme hook returns an object containing the following properties:

Name	Type	Description
theme	PearlTheme	The theme configuration object for the currently active color mode.
colorMode	"light" |"dark"	The currently active color mode.
toggleColorMode	() => void	A function that toggles the active color mode between light and dark.
switchColorMode	(mode: "light" | "dark" | "system") => void	A 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();