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.
Verb | POST |
Url | https://api.s.unit.sh/white-label/theme |
Data Type | whiteLabelTheme |
Timeout (Seconds) | 5 |
#
AttributesName | Type | Description |
---|---|---|
name | string | Theme Name. |
global | object | Global theme setup. |
elementsCard | object | Card element setup. |
elementsActivity | object | Activity element setup. |
elementsAccount | object | Account theme setup. |
elementsPayment | object | Payment 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" } } } } } } }}'
#
ResponseResponse is a JSON:API document.
#
201 CreatedField | Type | Description |
---|---|---|
data | object | The requested resource after the operation was completed. |
links | object | Related Link object with url to be used in component. |
#
RelatedField | Type | Description |
---|---|---|
type | String | Type of the resource in link. |
href | object | URL 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.
Verb | PUT |
Url | https://api.s.unit.sh/white-label/theme/{id} |
Data Type | whiteLabelTheme |
Timeout (Seconds) | 5 |
Get Theme#
Get white label theme by id.
Verb | GET |
Url | https://api.s.unit.sh/white-label/theme/{id} |
Data Type | whiteLabelTheme |
Timeout (Seconds) | 5 |
Example Request:
curl -X GET 'https://api.s.unit.sh/white-label/theme/{id}' \-H "Authorization: Bearer ${TOKEN}"