> ## 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.

# Configure frame appearance

> Control how co-branded frames look and behave in your app.

Use this guide to keep co-branded frames consistent with the rest of your UI.
Frames render MoonPay-hosted UI inside your app, so presentation choices affect
how the flow feels to customers.

## Prerequisites

* A [connected customer](/platform/guides/connect-a-customer).
* A container element in your UI where you render frames.

## Choose the right UI surface

* **Web**: Render co-branded frames in a modal or sheet and keep the rest of your UI visible behind it.
* **Mobile**: Present co-branded frames in a full-screen route or full sheet. This reduces layout issues when the frame navigates between steps.

## Control light and dark appearance

The [connect frame](/platform/frames/connect) supports a `theme` parameter. Use it to force `dark` or `light` instead of relying on the user's system appearance.

If you use the SDK, pass `theme` when you initialize the connect flow:

```ts Set appearance example highlight={8-10} theme={null}
import { createClient } from "@moonpay/platform-sdk-web";

const client = createClient({ sessionToken: "..." });

const connectResult = await client.connect({
  container: connectContainer,

  theme: {
    appearance: "dark", // Force dark mode
  },

  onEvent: (event) => {
    // Handle events
  },
});
```

If you build the connect frame URL manually, include `theme` in the query string:

```html Example URL theme={null}
https://blocks.moonpay.com/platform/v1/connect?sessionToken=c3N0XzAwMQ==&publicKey=...&channelId=ch_1&theme=dark
```

<Info>If you omit `theme`, the frame uses the user's system preference.</Info>

## Practical customization tips

* **Avoid resizing containers mid-flow**: Use a stable container size while the frame is mounted to prevent content jumps.
* **Show clear loading states**: If you wait for a frame’s `ready` event, keep your UI responsive and show a spinner/skeleton.
* **Plan for errors**: If a frame dispatches an `error` event, show a developer-friendly fallback (retry, exit, or contact support).

## Next steps

<Columns cols={2}>
  <Card title="Frames overview" icon="book" href="/platform/frames/overview" cta="Read more">
    Learn the shared messaging protocol for integrating without the SDK.
  </Card>

  <Card title="Connect frame reference" icon="file-code" href="/platform/frames/connect" cta="View parameters">
    See all initialization parameters including `theme`.
  </Card>
</Columns>