Customize the Ramp Widget Appearance

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:

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:

/** 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

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

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

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.

Introduction

Get Started

Customize the Ramp Widget Appearance

Applying a theme

Theme interface

Theme properties

Example

​Applying a theme

​Theme interface

​Theme properties

​Example

Applying a theme

Theme interface

Theme properties

Example