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.
