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