Skip to main content
Theme settings page in light modeTheme settings page in dark mode

Theme Settings — the tenant branding page

The Theme page controls the tenant’s visible branding — the display name, the logos that appear in the app and on the legacy customer chat pages, the brand colours, the per-handoff destination icons, and the color palette that drives buttons, badges, and links.

​
Accessing Theme

Navigate to Settings > Theme in the left sidebar.

​
Tenant display name

The Tenant display name field at the top of the page sets the name shown in the browser title bar, the tenant switcher, and any place the product references the tenant by name.
1

Edit the field

Type the new display name.
2

Save

The Save button enables once the value changes.

​
Logos

Every logo slot accepts a separate Light mode and Dark mode image, so your branding matches whichever theme the viewer has selected. Click the Upload button under each slot to pick a file (PNG or JPEG, up to 2 MB).

​
Application header

The logo shown in the top-left of the platform’s main navigation bar — visible on every page after sign-in.

​
Brand colours

The Brand colours section has two colours: Primary colour and Accent colour. Documents that the platform exports for your organization use them, such as the deployment status report. The light App header logo is the logo on those documents. The Primary colour is also the default accent colour of each web widget. A widget that overrides its accent does not use it. See Widget appearance.

​
Customer chat page

Two surfaces, both shown on the legacy chat page that end customers interact with (not the operator UI):
  • Chat header icon — small icon shown in the chat page’s header bar.
  • Sidebar header logo — full logo shown at the top of the chat page sidebar.
The sidebar header logo is the most visible branding to your customers — invest the most polish here.
These logos show only on the legacy web chat (chat links on the Web (Legacy) tab). A web widget shows no tenant logo. Its look comes from its own appearance.

​
Handoff icons

When a flow hands a conversation off to another destination (a queue, an external integration, a human agent group), the destination appears in the Conversations table under the Status column. The Handoff icons section lets you customize the icon shown for each destination.
Only handoff destinations that have already appeared in real transcripts can be customized — the platform discovers destinations from transcript history. If you don’t see a destination listed, drive a conversation that hands off to it first, then return here.

​
Color palette (Brand)

The brand palette drives primary buttons, chat bubbles, link colors, and selected branded UI elements. It is a 16-step ramp from 10 (darkest) to 160 (lightest), with 80 representing the primary brand color.

​
Example palette

​
Generating a palette

A practical way to build a coordinated palette from a new primary color is to provide an example like the one above to an LLM along with your new 80 value and ask for a matching ramp.

​
Applying a palette

Themes are applied per tenant via the API:
For the underlying theme variables and what each one drives, see Fluent UI 9’s theme documentation — the platform’s UI is built on Fluent UI 9, so every variable from that catalog is accepted in the body.

​
Advanced — per-mode overrides

To override individual variables for light and dark mode separately, prefix the key with light- or dark-:
Custom theme overrides can break contrast and readability. Test against WCAG contrast guidelines before rolling a change tenant-wide.

​
Commonly tuned variables

Environment

Manage tenant-wide environment variables and secrets.

Users

Onboard operators who will see this branding.

Widget appearance

The look of a web widget, with the brand colour as its accent.

Points of Contact: Web (Legacy)

The legacy chat surface the logos appear on.