Themes

White-Label Themes

Mansar 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.

Create Theme​

Creates theme for white label components.

Verb	POST
Url	https://api.s.usemansar.xyz/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.usemansar.xyz/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.usemansar.xyz/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.usemansar.xyz/white-label/theme/{id}
Data Type	whiteLabelTheme
Timeout (Seconds)	5

Get Theme​

Get white label theme by id.

Verb	GET
Url	https://api.s.usemansar.xyz/white-label/theme/{id}
Data Type	whiteLabelTheme
Timeout (Seconds)	5

Example Request:

curl -X GET 'https://api.s.usemansar.xyz/white-label/theme/{id}' \
-H "Authorization: Bearer ${TOKEN}"