Skip to main content

White-Label Themes

Unit white-label UI components are highly customizable. You can use customization to align the look and feel of the components with your app and brand, as well as create multiple themes (e.g. light and dark theme). This customization options include changes to colors, typography, and other design elements.

info

More information about themes and customizations can be found here

Create Theme

Creates theme for white label components.

VerbPOST
Urlhttps://api.s.unit.sh/white-label/theme
Data TypewhiteLabelTheme
Timeout (Seconds)5

Attributes

NameTypeDescription
namestringTheme Name.
globalobjectGlobal theme setup.
elementsCardobjectCard element setup.
elementsActivityobjectActivity element setup.
elementsAccountobjectAccount theme setup.
elementsPaymentobjectPayment theme setup.
Example Request:
curl -X POST 'https://api.s.unit.sh/white-label/theme'
-H 'Content-Type: application/vnd.api+json'
-H 'Authorization: Bearer ${TOKEN}'
--data-raw '{
"data": {
"type": "whiteLabelTheme",
"attributes": {
"name": "VIP Theme",
"global": {
"colors": {
"background": "#2223334",
"primary": "#0000F0",
"secondary": "#000000",
"neutral": "#FF9933",
"success": "#0CD96F",
"warning": "#FF9933",
"error": "#FF4F64"
},
"typography": {
"common": {
"fontFamily": "sans-serif"
},
"titles": {
"h2": {
"fontWeight": "800"
},
"h3": {
"fontWeight": "800"
}
}
}
},
"elementsCard": {
"designs": [
{
"name": "default",
"url": "https://d1xlopvhx2cz8k.cloudfront.net/resources/outlay.png",
"fontColor": "#00ff00",
"boxShadow": "0px 3.6px 15px 2px rgb(0 0 0 / 0.25)"
}
]
},
"elementsAccount": {
"override": {
"global": {
"colors": {
"background": "#00ff00"
}
}
}
},
"elementsPayment": {
"override": {
"global": {
"typography": {
"common": {
"fontFamily": "Poppins"
}
}
}
}
}
}
}
}'

Response

Response is a JSON:API document.

201 Created

FieldTypeDescription
dataobjectThe requested resource after the operation was completed.
linksobjectRelated Link object with url to be used in component.
FieldTypeDescription
typeStringType of the resource in link.
hrefobjectURL to be set in theme property of component.
Example Response:
{
"data": {
"type": "whiteLabelTheme",
"id": "10008",
"attributes": {
"...": "..."
},
"links": {
"related": {
"type": "application/json",
"href": "https://ui.s.unit.sh/resources/982/themes/605676c1-b00b-4748-9fa4-258d1a28c3fb.json"
}
}
}
}

Update Theme

Updates theme for white label components.
note

You need to send the full theme object in the request body, not only the fields that were changed.

VerbPUT
Urlhttps://api.s.unit.sh/white-label/theme/{id}
Data TypewhiteLabelTheme
Timeout (Seconds)5

Get Theme

Get white label theme by id.
VerbGET
Urlhttps://api.s.unit.sh/white-label/theme/{id}
Data TypewhiteLabelTheme
Timeout (Seconds)5
Example Request:
curl -X GET 'https://api.s.unit.sh/white-label/theme/{id}' \
-H "Authorization: Bearer ${TOKEN}"