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

# Customize the Ramp Widget Appearance

> Customize SpherePay's Ramp Widget colors, border radius, and logo to match your application's brand. Pass a theme object to the RampWidget constructor.

The Ramp Widget supports theming so you can match its look and feel to your application's brand. You control the primary color scheme, border radius, and logo by passing a `theme` object to the `RampWidget` constructor.

## Applying a theme

Pass the `theme` property when initializing the widget:

```javascript theme={"dark"}
function initSphereRamp() {
  new RampWidget({
    containerId: 'container',
    applicationId: 'YOUR_APPLICATION_ID',
    theme: {
      color: 'violet',
      radius: 'lg',
      components: {
        logo: 'https://example.com/your-logo.png',
      },
    },
  })
}
```

## Theme interface

The full TypeScript interface for the `theme` object is:

```typescript theme={"dark"}
/** The widget's primary color */
type ThemeColor =
  | 'default'
  | 'zinc'
  | 'slate'
  | 'stone'
  | 'gray'
  | 'neutral'
  | 'red'
  | 'rose'
  | 'orange'
  | 'green'
  | 'yellow'
  | 'violet'

/** The widget's border radius size */
type ThemeRadius = 'default' | 'none' | 'sm' | 'lg' | 'xl'

interface ThemeComponents {
  /**
   * The URL to a custom logo.
   * We suggest using 56px x 56px images due to height constraints,
   * but wider images should also work fine.
   */
  logo: string
}

interface Theme {
  color: ThemeColor
  radius: ThemeRadius
  components: ThemeComponents
}
```

## Theme properties

| Property          | Type          | Description                                                              |
| ----------------- | ------------- | ------------------------------------------------------------------------ |
| `color`           | `ThemeColor`  | The primary color palette for the widget. Defaults to `'default'`.       |
| `radius`          | `ThemeRadius` | The border radius applied to buttons and cards. Defaults to `'default'`. |
| `components.logo` | string        | URL of a custom logo image to display in the top-left of the widget.     |

## Example

```javascript theme={"dark"}
const theme = {
  color: 'zinc',
  radius: 'none',
  components: {
    logo: 'https://example.com/logo.png',
  },
}

new RampWidget({
  containerId: 'container',
  applicationId: 'YOUR_APPLICATION_ID',
  theme,
})
```

<Tip>
  For the logo, use a square image at 56px × 56px for the best appearance. Wider images are supported but may appear differently depending on the widget layout.
</Tip>