> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).
>
> To search these docs, send a `GET` request to `https://paddle-docs-retrieval.kapa-paddle.workers.dev/?q=<question>` with a URL-encoded question. No authentication needed. It returns a JSON array of `{content, source_url}`, most relevant first.

# Style checkouts for light and dark mode

Set separate light and dark mode colors for inline and hosted checkouts using the Paddle dashboard or API.

---

## What's new?

We've added light and dark mode styling for [inline checkout](https://developer.paddle.com/build/checkout/build-branded-inline-checkout.md) and [hosted checkouts](https://developer.paddle.com/paddle-js/about/hosted-checkout.md). 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](https://developer.paddle.com/build/checkout/brand-customize-inline-checkout.md#style-checkout-using-the-api) 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()`](https://developer.paddle.com/paddle-js/methods/paddle-checkout-open.md) or [`Paddle.Initialize()`](https://developer.paddle.com/paddle-js/methods/paddle-initialize.md) to choose which mode a checkout opens in. It defaults to `light`.

To get styles using the API, send a {% method-badge method="GET" /%} request to [`/checkout-styles`](https://developer.paddle.com/api-reference/checkout-styles/get-checkout-style.md). To update them, send a {% method-badge method="PATCH" /%} request to [`/checkout-styles`](https://developer.paddle.com/api-reference/checkout-styles/update-checkout-style.md). Updates are partial, so you can change one color in one mode without sending the rest. Your API key needs `checkout_settings.read` [permission](https://developer.paddle.com/api-reference/about/permissions.md) to get styles, or `checkout_settings.write` to get and update them.

{% callout type="info" %}
Light and dark mode styling applies to inline checkout and hosted checkouts. Overlay checkout uses your brand color.
{% /callout %}

## 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](https://developer.paddle.com/api-reference/checkout-styles/update-checkout-style.md) via the API.

For more information, see [Brand inline checkout](https://developer.paddle.com/build/checkout/brand-customize-inline-checkout.md).
## Summary of changes

| Name | Type | Change | Entity | Description |
| --- | --- | --- | --- | --- |
| GET /checkout-styles | API operation | added | Checkout styles | Get checkout styles, including shared settings and colors for light and dark mode. |
| PATCH /checkout-styles | API operation | added | Checkout styles | Update checkout styles. Send only the fields that you want to change. |
| `settings.theme` | Paddle.js param | updated | Paddle.Checkout.open() | For inline checkout, now applies the light or dark mode styles you set for your account. |
| `checkout.settings.theme` | Paddle.js param | updated | Paddle.Initialize() | For inline checkout, now applies the light or dark mode styles you set for your account. |
| `data-theme` | Paddle.js param | updated | HTML data attributes | For inline checkout, now applies the light or dark mode styles you set for your account. |
| `theme` | Paddle.js param | updated | Hosted checkout URL parameters | Now applies the light or dark mode styles you set for your account. |