Skip to main content

Dark Mode Support

Pearl UI is equipped with a built-in feature for managing the active color mode in your applications. By default, the majority of the included components are compatible with dark mode.

Setting the initial color mode#

You can specify the color mode of your application upon its first load using the ThemeProvider. This component expects an initialColorMode prop which can accept the following values:

  1. light: The application will always start in light mode
  2. dark: The application will always start in dark mode
  3. system: The application will start in the mode that matches the color mode of the underlying device.

App.tsx
import * as React from "react";
// Import the ThemeProvider componentimport { ThemeProvider } from "pearl-ui";
const App = () => {  return (    // Wrap your application components with the ThemeProvider    <ThemeProvider initialColorMode="system">        // {... other components go here}    </ThemeProvider>  );};

Retrieving the active color mode#

You can access the active color mode using the useTheme hook.

Modifying the color mode#

The useTheme hook provides the following functions to change the active color mode.

Toggling the active mode#

Switching to a specific mode#

Colors specific to color mode#

To make any component compatible with dark mode, you need to define how the colors in the component change based on the active color mode. This can be achieved using the following two methods:

Object syntax#

The color and background color style props can optionally accept color mode specific values that are activated based on the active mode.

The following structure is expected when specifying color mode values:

type ColorModeColor = {  light: PearlTheme["palette"];  dark: PearlTheme["palette"];};

Example#

useColorModeValue#

Pearl UI also offers the useColorModeValue hook that achieves the same result as the object syntax.

Here's how you can re-write the example above using the useColorModeValue hook:

Example#