> ## Documentation Index
> Fetch the complete documentation index at: https://dev.moonpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget theming

> Enhance your website or applications user experience by tailoring the MoonPay widget's appearance to align with your brand. These personalization options are referred to as a _theme_.

## Building your theme

Your website or application can feature a unique theme that includes a dedicated theme.

You can build your theme using [MoonPay dashboard theme builder](https://dashboard.moonpay.com/theme). Themes built on the MoonPay dashboard are tied to your API key and will show up wherever you use your API key (e.g. widget, transaction tracker).

<Frame caption="Theming in the dashboard">
  <img src="https://mintcdn.com/moonpay/Kzio-7fxRExSXZf_/images/widget/08d2107bd0e8c3d1d360b981b9f503e712b5867d1829ce6c3038a71038071125-Screenshot_2025-06-10_at_4.13.10_PM.png?fit=max&auto=format&n=Kzio-7fxRExSXZf_&q=85&s=0f66fd8bcbaf2a4fa2333004157d818c" alt="Theming" width="2730" height="1492" data-path="images/widget/08d2107bd0e8c3d1d360b981b9f503e712b5867d1829ce6c3038a71038071125-Screenshot_2025-06-10_at_4.13.10_PM.png" />
</Frame>

## Implementing your theme

To apply your custom theme, simply set your newly created theme to the default and save the changes.

This makes sure the widget or transaction tracker is initialized with the corresponding theme whenever you use your MoonPay API key.

## Examples

<Frame caption="Mobile">
  <img src="https://mintcdn.com/moonpay/Kzio-7fxRExSXZf_/images/widget/217f53b21356ec01110d372d9f8c00667caaba3c80d1850bb9e949da5fcbbd44-Screenshot_2025-06-10_at_4.24.16_PM.png?fit=max&auto=format&n=Kzio-7fxRExSXZf_&q=85&s=b818eeccc2277ad513f9b7c034e8054b" alt="Mobile" width="1624" height="1762" data-path="images/widget/217f53b21356ec01110d372d9f8c00667caaba3c80d1850bb9e949da5fcbbd44-Screenshot_2025-06-10_at_4.24.16_PM.png" />
</Frame>

<Frame caption="Desktop">
  <img width="340" src="https://mintcdn.com/moonpay/Kzio-7fxRExSXZf_/images/widget/592acda66de6acde21385f2da7c624c6db4ea57519228d4c7ef8687265284f0d-Screenshot_2025-06-10_at_4.26.51_PM.png?fit=max&auto=format&n=Kzio-7fxRExSXZf_&q=85&s=a161013cc91733efc0291419743eab94" alt="Desktop" data-path="images/widget/592acda66de6acde21385f2da7c624c6db4ea57519228d4c7ef8687265284f0d-Screenshot_2025-06-10_at_4.26.51_PM.png" />
</Frame>

## Available personalizations

* **Brand logos**. Contact your MoonPay team and include:
  * 1 rectangular logo for transactional emails

* **Color choices** accommodating both light and dark preferences.
  * Widget Background Color
  * Primary Button Color

* **Custom Loader** - for a simple approach to customizing the loader that your MoonPay widget displays, you can use the dashboard:
  1. Go to the B2B dashboard
  2. Navigate to "Theme" → "Loader"
  3. Choose your preferred loader type (MoonPay default or generic spinner)
  4. Select custom colors to match your brand
  5. Save changes

## Usage of `theme`

You can manually choose light or dark modes using the`theme` widget parameter. e.g. `theme=dark` or `theme=light`