Themes
Unit's White-label UIs support multiple Themes.
In order to create a new Theme, you would need to upload a JSON that contains the White-label settings associated with that theme via an API.
In response, you will get a URL. You will then specify that URL as you initialize any UI Component, under the theme attribute.
The best way to understand how to use the White-label Themes is to see them in action. Try out the Component Preview page in order to make a Component look and feel like your brand. Once you are happy with the result, you can copy the JSON settings from under the 'Appearance Config' tab in the preview page, and create the theme by uploading the JSON to the API.
After creating the theme, you can use the link from the response to apply the theme to UI components. Here's an example with an account component:
<unit-elements-account
account-id="12345"
customer-token="{{customerToken}}"
theme="https://ui.s.unit.sh/resources/1/themes/291ccb0e-9447-4010-98ef-0b9bf0fd04dc.json"
></unit-elements-account>
Customization Options
The settings that make up a theme are divided into two main categories - global settings and component specific settings.
- Global settings are meant to reflect your brand's design system - colors, fonts, basic component look and feel.
- Component specific settings are meant to allow you to control UI Elements that are unique to a specific Component (e.g. the color of the font on a card image). On the component specific level, you may also provide overrides to any parameter specified in the global settings.
Note
Please reach out to Unit if you need additional customization options to support your brand.
Global Settings
- This object located on the root of the theme JSON object, but it can also be overridden on the component level.
logoUrl
string
URL to a logo image.
faviconUrl
string
URL to a favicon image.
colors
object
Color palette
typography
object
Typography (text) preferences
buttons
object
buttons states preferences
menuButton
object
menu-button states preferences
avatar
object
avatar preferences
cardIcon
object
card icon preferences
Colors
background
string
Will be used as background color of the components, drop downs menus and inner flows.
primary
string
Will be used for buttons, icons, highlight fields that are in focus, cover elements.
secondary
string
The secondary brand color is used for secondary buttons.
neutral
string
We will derive 6 neutral shades based on your main Neutral color. These shades will be used for texts, light background colors and disabled/inactive elements.
success
string
Semantic. Will be used in messages, toasts, statuses and alerts.
warning
string
Semantic. Will be used in messages, toasts, statuses and alerts.
error
string
Semantic. Will be used in messages, toasts, statuses and alerts.
Typography
common
object
Common typography settings (running texts).
titles
object
Titles typography settings.
Common
fontFamily
string
Font family for Elements. Note, the Components components will not fetch the font. Font should be available on the page from which the Components are used.
fontSize
string
Font size for elements. Can be set to either relative or absolute units.
rootFontSize
string
Sets the base font size, similar to applying font-size on :root or the "html" element. Affects text scaling and all relative-based units within the component.
Titles
h2
The main title used in the Components. Examples include the Card title, Activity table title etc.
flow
The titles used for a flow or series of steps in a component. (card-actions, payments flows, etc.)
Title
fontWeight
100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , 950 , "normal" , "bold" , "bolder" , "lighter"
The thickness or boldness of the font.
color
string
The color of the text in the title.
fontSize
string
The size of the font used in the title.
fontFamily
string
The specific font family for the title's text.
Big Number
fontWeight
100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , 950 , "normal" , "bold" , "bolder" , "lighter"
The thickness or boldness of the font.
color
string
The color of the text in the big number display.
fontFamily
string
The specific font family for the big number text.
largeFontSize
string
The font size for larger big number displays.
extraLargeFontSize
string
The font size for extra-large big number displays.
Flow
Response
Empty State
Table
Buttons
Menu Button
Button States
Button Attributes
textColor
string
The color of the text in the button.
backgroundColor
string
The background color of the button.
Border
width
string
The width of the border around the element.
radius
string
The border radius or curvature of the element's corners.
color
string
The color of the border around the element.
Avatar
iconColor
string
Will control the color of the icon.
borderColor
string
Will control the color of the border.
backgroundColor
string
Will control the color of the background.
Card Icon
backgroundColor
string
Will control the color of the background.
visaTextColor
string
Will control the color of the Visa text.
Component Specific Settings
Card
designs
Array of Design
The main title used in the Components. Examples include the Card title, Activity table title etc
Card Design
name
string
Name of your design, should match the name of Card design in Unit. For charge cards the name must contain "_credit".
url
string
Link to Card image
fontColor
string
Will control the font color on top of the Card
boxShadow
string
Will control the Card shadow
Account
titleColor
string
Will control the font color of the account title
balanceTitleColor
string
Will control the font color of the balance title
coverBackgroundColor
string
Will control the color of the cover background
Default Theme
You can set a default theme for all components in the Unit Dashboard under Org Settings → Branding. The dashboard displays all themes created by your organization, and the selected theme will be applied to all components by default unless a specific theme is provided.
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
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
data
object
The requested resource after the operation was completed.
links
object
Related Link object with url to be used in component.
Related
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"
}
}
}
}
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 |
Example Request:
curl --request PUT 'https://api.s.unit.sh/white-label/theme/{id}' \
--header 'Content-Type: application/vnd.api+json' \
--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"
}
}
}
}
}
}
}
}'
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 themes resources. Paging and sorting can be applied.
| Verb | GET |
| URL | https://api.s.unit.sh/white-label/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/white-label/theme?page[limit]=20&page[offset]=10' \
-H "Authorization: Bearer ${TOKEN}"