Style checkouts for light and dark mode

What's new?

We've added light and dark mode styling for inline checkout and hosted checkouts. You can set separate colors for each mode in the Paddle dashboard, preview both, and save when you're ready.

We've also added operations to get and update checkout styles using the Paddle API, so you can define your color palette with an API call.

How it works

Inline checkout has supported dark mode using the Paddle.js theme setting for some time, with one set of colors for both modes. You can now set colors separately for light and dark mode, and preview both in the dashboard before you save.

Checkout styles now have two parts:

• Shared settings apply in both modes. They include font, sizes, borders, button width, label position, and checkout padding.
• Mode colors are set separately for light and dark mode. They include button, input, label, link, focus, and message colors.

If you've already styled checkout, your colors are now used for both light and dark mode. To check how dark mode looks in the dashboard preview and adjust the colors, go to Paddle > Checkout > Checkout configuration, then click the Styling tab. If you haven't styled checkout, dark mode starts with its own default colors.

Pass theme to Paddle.Checkout.open() or Paddle.Initialize() to choose which mode a checkout opens in. It defaults to light.

To get styles using the API, send a GET request to /checkout-styles. To update them, send a PATCH request to /checkout-styles. Updates are partial, so you can change one color in one mode without sending the rest. Your API key needs checkout_settings.read permission to get styles, or checkout_settings.write to get and update them.

Next steps

It's a non-breaking change, meaning it doesn't impact existing integrations.

This change is available in version 1 of the Paddle API.

To get started, go to Paddle > Checkout > Checkout configuration, then click the Styling tab, or update checkout styles via the API.

For more information, see Brand inline checkout.