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
<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 modalaccentColor
: the accent color used for active states, CTAs, and morelogo
: your app's logoshowWalletLoginFirst
: 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!
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'
)
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.
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.
Logo
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
.
- Light
- Dark
- Cream (Custom)
- Forest (Custom)

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

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

// The modal's color palette is generated from the custom theme and accent colors.
const config = {
appearance: {
theme: '#FCF7EE',
accentColor: '#38CCCD'
logo: 'light-logo-url'
}
}

// The modal's color palette is generated from the custom theme and accent colors.
const config = {
appearance: {
theme: '#425047',
accentColor: '#A7C080'
logo: 'dark-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!
: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';
}