Theme Customization
The Hubble SDK offers a high degree of visual customization to ensure it seamlessly matches your application's branding and user interface.
Customization Scope
The Hubble SDK supports flexible visual customization while preserving functional consistency across flows. All supported customizations are token and component driven.
Themes
- Switch between Light and Dark themes
- Theme switch applies globally across all screens
Setting Theme via URL
You can set the theme dynamically using a URL query parameter:
theme=light— Light Themetheme=dark— Dark Theme
Example:
https://{baseUrl}/?clientId=[..]&clientSecret=[..]&token=[..]&theme=dark
Base URLs:
- Development:
https://sdk.dev.myhubble.money - Production:
https://sdk.myhubble.money
Buttons
Customizable properties:
- Fill colour
- Button text colour
- Corner radius
- Shadows (optional)
Button states (default, pressed, disabled) remain consistent and auto-update.
Header
Configurable options:
- Title type: Savings amount / Logo / Empty
- Header style: Curved or Straight
- Header fill colour
- Show or hide coin balance
- Enable or disable stroke
- Brand logo placement
Search Bar
Customizable properties:
- Background colour
- Corner radius
Typography
- Modify Primary, Secondary, and Tertiary text colours
- The file has predefined text styles (Titles, Paragraphs, Labels, Captions)
- Replace font family using Uwarp font replacer plugin
Image Dimensions
Below are the standard dimensions and aspect ratios for key visual elements used within the Hubble SDK:
Coin Image
| Property | Value |
|---|---|
| Width | 20 px |
| Height | 20 px |
| Aspect Ratio | 1 : 1 |
| Format | PNG (transparent background) |
Header Logo
| Property | Value |
|---|---|
| Width | 96 px |
| Height | 40 px |
| Aspect Ratio | 12 : 5 |
| Format | PNG or SVG |
Banner
| Property | Value |
|---|---|
| Width | 353 px |
| Height | 199 px |
| Aspect Ratio | 16 : 9 |
| Border Radius | 1 rem |
| Format | PNG or JPG |
Ensure your theme customization is complete and tested in staging before going live. While theme changes can be made at any time, a mismatched or incomplete theme creates a poor first impression for users.
Theme updates apply to all new SDK sessions within minutes of saving in the integration portal. No code changes or deployments are required on your side.