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 theme
s and accentColor
s) 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.