Skip to main content

UI Themes

You can customize the look and feel of the Privy modal to match your product's branding and UI.

Learn how to customize the Privy modal for your app below, or check out some example themes!

Configuration​

To configure a theme for the Privy modal, pass in an appearance object to the config property of the PrivyProvider

Example of configuring a theme for the Privy modal
<PrivyProvider
  appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
  config={{
    appearance: {
      theme: "dark",
      accentColor: "#676FFF",
      logo: "https://your-logo-url",
      showWalletLoginFirst: true
    }
  }}
>
...

In the appearance object, you may include the following three parameters:

  • theme: the overall color scheme of the modal
  • accentColor: the accent color used for active states, CTAs, and more
  • logo: your app's logo
  • showWalletLoginFirst: whether to show wallet login options above or below other login options

Each of these works in concert to match your application's UI and branding; read on to learn how to customize each of these parameters!

info

If you have previously set your app's accent color and/or logo in the Privy developer console, those settings will still be applied to your app, unless you pass in an appearance object into the config property of your PrivyProvider.

If you explicitly set an accent color and/or logo in the config of your PrivyProvider (as described below), the values you set in the config will override your previous settings from the developer console.

Theme​

The theme property will set the background and foreground colors of the Privy modal, and has three potential values:

  • 'light' (standard Privy light theme)
  • 'dark' (standard Privy dark theme)
  • a custom hexadecimal color as a string (e.g. '#13152F')
info

If you'd like to conditionally set your modal's theme based on your user's system preferences, check out this guide!

If you set a custom hexadecimal color as the theme, the theme color will be used as the primary background color for the Privy modal. All other colors will be automatically generated by modulating the luminance of the theme color you set. This creates a cohesive palette that matches your app's branding. If you'd like, you may also override these automatically generated colors to better match your brand palette.

tip

If you set a custom hexadecimal color as your theme, we strongly recommend choosing a color that is either light or dark (>80% or <20% luminance, as defined by HSL). This helps ensure there is sufficient contrast between foreground and background colors in the Privy modal.

If you do not explicitly set a theme, the Privy modal will default to the Privy light theme.

Accent Color​

The accentColor property is will be used for active states, calls to action, and accents throughout the application. You may set any hexadecimal color as a string as the accentColor.

If you do not specify an accentColor, Privy will use #696FFD by default.

The logo property is used to display your application's logo on your login modal. You should provide a URL to a hosted image. For best results, we recommend an SVG format with a 4:1 aspect ratio.

Login Ordering​

The showWalletLoginFirst property is used to determine whether your login modal shows wallet login options above or below other login options (email, SMS, socials). By default, it is true.

If you'd like your app to cater more to newcomers than native users, you can toggle this property to false to prioritize more familiar login methods for your users.

Examples​

Below are some example appearance parameters to pass into the config property of your PrivyProvider.


Example light theme configuration
// Since no appearance.accentColor is specified, the default accentColor (#696FFD) is used.
const config = {
  appearance: {
    theme: 'light',
    logo: 'light-logo-url'
  }
}

Advanced theming with CSS overrides​

Beyond the configuration properties above, Privy also enables you to explicitly override specific colors in the login modal, to further match your product's design system and color palette. You might use these overrides if you are using a default Privy theme ('light' or 'dark') and wish to tweak a certain color, or if you set a custom theme and want to use your exact brand colors instead of the automatically-generated ones.

To explicitly override colors in your Privy modal, simply add the corresponding CSS variable for the color to the CSS :root of your app, and set it to your custom color.

The possible CSS variables are listed below; we encourage you to use your browser's developer tools to experiment with different color combinations to find the right one for your app!

Using :root CSS overrides
:root {
  --privy-border-radius-sm: 'your-custom-value';
  --privy-border-radius-md: 'your-custom-value';
  --privy-border-radius-lg: 'your-custom-value';
  --privy-border-radius-full: 'your-custom-value';
  --privy-color-background: 'your-custom-value';
  --privy-color-background-2: 'your-custom-value';
  --privy-color-foreground: 'your-custom-value';
  --privy-color-foreground-2: 'your-custom-value';
  --privy-color-foreground-3: 'your-custom-value';
  --privy-color-foreground-4: 'your-custom-value';
  --privy-color-foreground-accent: 'your-custom-value';
  --privy-color-accent: 'your-custom-value';
  --privy-color-accent-light: 'your-custom-value';
  --privy-color-accent-dark: 'your-custom-value';
  --privy-color-success: 'your-custom-value';
  --privy-color-error: 'your-custom-value';
}