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

Attributes

Name	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"
              }
            }
          }
        }
      }
    }
  }
}'

Response

Response is a JSON:API document.

201 Created

Field	Type	Description
data	object	The requested resource after the operation was completed.
links	object	Related Link object with url to be used in component.

Related

Field	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}"

List

List themes resources. Paging and sorting can be applied.

Verb	GET
Url	https://api.s.unit.sh/theme
Timeout (Seconds)	5

Query Parameters

Name	Type	Default	Description
page[limit]	integer	100	Optional. Maximum number of resources that will be returned. Maximum is 1000 resources. See Pagination.
page[offset]	integer	0	Optional. Number of resources to skip. See Pagination.
filter[fileName]	string	(empty)	Optional. Find by file name.
sort	string	sort=-createdAt	Optional. sort=createdAt for ascending order or sort=-createdAt (leading minus sign) for descending order.

curl -X GET 'https://api.s.unit.sh/theme?page[limit]=20&page[offset]=10' \
-H "Authorization: Bearer ${TOKEN}"