Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.privy.io/llms.txt

Use this file to discover all available pages before exploring further.

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/ui';

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/ui';

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