Customizing UIs

You can customize the theme and appearance of Privy's default UIs in your app.

Brand color

Privy's default UIs for Expo support theming by using the brand color you have set in the dashboard, or by setting a value specific to your mobile application by using the PrivyElements config prop.

If you want to set the value manually, instead of automatically through the dashboard, you should set the accentColor config option on the PrivyElements component.

import {PrivyElements} from '@privy-io/expo';

export default function RootLayout() {
  return (
    <>
      {/* Your app's content */}
      <PrivyElements config={{appearance: {accentColor: '#00AF55'}}} />
    </>
  );
}

Color scheme (light and dark mode)

Privy's default UIs also support adapting the color scheme to both light and dark mode, via the colorScheme config option.

You can set a fixed value if that best matches the experience and design of your application, or you can use React Native's own useColorScheme hook to get a dynamic value and adapt to your user's settings.

import {useColorScheme} from 'react-native';

import {PrivyElements} from '@privy-io/expo';

export default function RootLayout() {
  const colorScheme = useColorScheme();
  return (
    <>
      {/* Your app's content */}
      <PrivyElements config={{appearance: {colorScheme}}} />
    </>
  );
}