mode to choose the modal’s base color scheme and customTheme to match your branding. Set mode="light" or mode="dark" for a fixed appearance, or use mode="auto" (the default) to follow the user’s OS preference.
Pass CSS custom properties directly to customTheme. All properties are optional and accept CSS values as strings, including units where needed (for example, "12px"). Properties you omit keep their built-in styles for the selected mode.
In the provider setup, add your theme to PayKitProvider:
Common theme properties
Use
options.overlayBlur to control the background blur in pixels separately from the overlay color.
Light and dark themes
Custom values override the base theme in both light and dark modes. Withmode="auto", only properties you leave unset change with the OS preference. If you override backgrounds and text colors, choose values that work together in both modes, or pass a different customTheme when your application’s theme changes and set mode to match.