Appearance

Setting a system theme for the Privy modal ​

With Privy, you can style your login modal to match your user's system preferences for light or dark mode. Below is a short guide for how to configure your login modal to match your user's system settings.

1. Get your user's system preferences ​

To start, you should determine if your user's system preferences are configured for light mode, or for dark mode.Based on their system preferences, your user's device will automatically set the prefers-color-scheme CSS media feature in your website to indicate their light/dark preference. You can simply query this media feature to determine if your user prefers light or dark mode.

Below is a sample React hook to determine if your user prefers light or dark mode; feel free to use this directly in your app!

tsx
import {useEffect, useState} from 'react';

// Returns true if the user prefers dark mode, and false otherwise
export default function useDarkMode() {
  const [darkMode, setDarkMode] = useState(false);

  const modeMe = (e: MediaQueryListEvent) => {
    setDarkMode(!!e.matches);
  };

  useEffect(() => {
    // Query the `prefers-color-scheme` media feature
    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
    setDarkMode(matchMedia.matches);
    // Listen to changes in the `prefers-color-scheme` media feature
    matchMedia.addEventListener('change', modeMe);
    return () => matchMedia.removeEventListener('change', modeMe);
  }, []);

  return darkMode;
}

2. Construct a light and dark theme ​

Next, in your frontend code, create an appearance configuration object for both light and dark mode. You can use the default Privy light and dark themes, e.g.:

tsx
const lightModeConfig = {
  appearance: {
    theme: 'light',
    logo: 'light-logo-url',
  },
};

Or, you can create custom lightModeConfig and darkModeConfig objects (with custom themes and accentColors) to match the modal's light and dark modes with your app's branding.

3. Conditionally set your theme based on the user's system preferences ​

Lastly, in your PrivyProvider, conditionally pass in the lightModeConfig (your light mode configuration object) or darkModeConfig (your dark mode configuration object) depending on the user's system preferences from step 1.

tsx
// 1. Query the user's system preferences for light or dark mode
const darkMode = useDarkMode();

// 2. Construct your light mode and dark mode configuration objects
const lightModeConfig = {
    /* your light mode configuration object */
}
const darkModeConfig = {
    /* your dark mode configuration object */
}

// 3. When you render your `PrivyProvider`, change the `config` property based on the user's system preferences
return(
    <PrivyProvider appId={'your-app-ID'} config={darkMode ? darkModeConfig : lightModeConfig}>
        {children}
    </PrivyProvider>
);

That's it! Your Privy modal's theme will now automatically match the user's system preference for light or dark mode.