Skip to main content

Color Mode (Dark Mode)

Pearl UI comes with built-in support for managing the active color mode in your apps. By default, most of the included components are dark mode compatible.

Specifying the initial color mode#

The color mode of your app on it's first load can be specified using the ThemeProvider. It expects an initialColorMode prop which can take the following values:

  1. light: The app would always start in light mode
  2. dark: The app would always start in dark mode
  3. system: The app would start with the mode corresponding to 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 app components with the ThemeProvider    <ThemeProvider initialColorMode="system">        // {... other components go here}    </ThemeProvider>  );};

Accessing the active color mode#

The active color mode can be accessed using the useTheme hook.

Changing the color mode#

The useTheme hook comes back to the rescue! It exposes the following functions to change the active color mode.

Toggling the active mode#

Switching to a specific mode#

Color mode specific colors#

To enable dark-mode compatibility for any component, you need to specify how the colors in the component change based on the active color mode. You can achieve this easily using the following 2 methods:

Object syntax#

The color and background color style props optionally expect color mode specific values that get 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 provides the useColorModeValue hook that achieves the same result as the object syntax.

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

Example#