config.appearance.logo
property of the PrivyProvider
component, like so:
''
) to appearance.logo
.
string
as the config.appearance.landingHeader
property of the PrivyProvider
component, like so:
string
of length 35 or less. Strings longer than the width of the login modal will be ellipsified.
If you do not set a custom header text, it will default to ‘Log in or sign up’.
string
as the config.appearance.loginMessage
property of the PrivyProvider
component, like so:
string
of length 100 or less. Strings longer than 100 characters will be truncated.
If you do not set a custom header text, there is no default.
config.appearance.theme
property of the PrivyProvider
to 'light'
, 'dark'
, or a custom color as a hexadecimal string. The theme
sets the core foreground and background colors for Privy’s UIs in your app.
theme
to 'light'
or 'dark'
, Privy’s UIs will use Privy’s standard light and dark themes, respectively. You can also set Privy’s theme based on the user’s system preferences by following this guide.
If you set the theme
to a custom hexadecimal color, the theme
color will be used as the primary background color for Privy’s UIs. 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.
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.loginMethodsAndOrder
override.This will allow you to fully customize the ordering of your login methods, with any overflow items (after the first four) going to a secondary page.config.appearance.showWalletLoginFirst
property of the PrivyProvider
like so:
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 body
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!