Skip to main content

Theming

Customize the SDK's appearance to match your brand. Theme settings are configured through the TSP dashboard and saved against your account (keyed by account, not by individual publishable key) — they apply automatically to every SDK instance initialized with any publishable key tied to that account. An enrolled END_USER account with no theme override of its own inherits its parent TSP's theme.

To access the theme editor, mount the dashboard view as a TSP user:

const sdk = Intellirent.init({
  publishableKey: "pk_live_xxx",
  userContext: { userId: "tsp_admin_001", userType: "TSP" },
});

await sdk.mount("#container", { view: "dashboard" });

From the dashboard, navigate to the Theme section to configure colors, typography, and shape.

Available Options​

All properties are optional. Omitted values use relay defaults.

Colors​

Override brand and UI colors. All values must be 6-digit hex strings (#RRGGBB).

PropertyDescriptionDefault
primaryPrimary brand color (buttons, focus rings)#1E293B
primaryLightLight shade of the primary color—
primaryDarkDark shade of the primary color—
secondarySecondary color#5E6566
secondaryLightLight shade of the secondary color—
secondaryDarkDark shade of the secondary color—
textPrimaryPrimary text color#303333
textSecondarySecondary text color#667A81
backgroundPage background color †#FFFFFF
errorError / destructive action color †#EF476F
successSuccess / confirmation color †#137B40
linkLink color for anchor elements#1E293B
linkHoverLink hover state color—
linkActiveLink active/pressed state color—

If primaryLight and primaryDark are omitted, they are derived automatically from primary. The same applies to secondaryLight and secondaryDark — if omitted, they are derived from secondary. Likewise, linkHover and linkActive default to darker and lighter shades of link, respectively.

background, error, and success have no dashboard control yet

† These three fields are validated and stored by the underlying theme API, but the Theme editor's Color settings screen has no input for them today, and the embedded form does not read them even if set directly through the API. Only primary*, secondary*, textPrimary, textSecondary, and link* are both editable in the dashboard and actually applied to the embedded form. Treat background, error, and success as reserved for a future release, not as available today.

Typography​

PropertyDescriptionDefault
fontFamilyFont family (must be a web-safe font)System default

Allowed fonts:

Open Sans, Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Trebuchet MS, Tahoma, system-ui, sans-serif, serif, monospace

Shape​

Not yet available from the dashboard

Border radius customization (buttonBorderRadius, cardBorderRadius) is defined in the underlying theme validation contract but is not yet persisted or exposed anywhere — there is no dashboard UI for it and no API accepts it. Only colors and fontFamily are actually stored per account today. The table below documents the validation rules that will apply once this ships; do not rely on shape customization being available yet.

PropertyDescriptionRangeDefault
buttonBorderRadiusBorder radius for buttons (px)0–248
cardBorderRadiusBorder radius for cards (px)0–245

Values outside 0–24 are clamped. Decimals are rounded to the nearest integer.

Limitations​

  • Web-safe fonts only: Custom or remote fonts (e.g., Google Fonts) are not supported. Only the allowlisted system fonts are accepted.
  • Color format: Only 6-digit hex (#RRGGBB) is accepted. CSS color names, rgb(), hsl(), 3-digit hex, and 8-digit hex with alpha are not supported.
  • Shape is not yet configurable: see the caution note under Shape above — buttonBorderRadius and cardBorderRadius have no dashboard UI or API today.
  • background, error, and success are not yet editable: see the caution note under Colors above — the API accepts and stores them, but there is no dashboard control and the embedded form does not apply them yet.
  • No font size or weight control: Typography overrides are limited to fontFamily. Font sizes, weights, and line heights follow the relay design system.
  • No spacing or layout control: Spacing, padding, and component sizing are not configurable.

Next Steps​