---
title: "Theme Colors"
slug: "theme-colors"
description: "This page guides you how to select the theme colors to get the look you want for your Self-Service Portal."
tags: ["SysAid Classic", "SysAid Spaces"]
updated: 2026-10-20T08:16:46Z
published: 2026-10-20T08:16:46Z
canonical: "documentation.sysaid.com/theme-colors"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.sysaid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Colors

A Self-Service Portal that reflects your organization's own colors feels like a natural part of the workplace, not a generic support tool bolted on to it. That familiarity builds trust: End Users are more likely to turn to the portal, and to feel at ease using it, when it looks and feels like it belongs to the organization they already know.

This page guides you on how to select the theme colors to get the look you want for your Self-Service Portal.

> [!NOTE]
> Available for:
> 
> - Customers using SysAid Spaces. If you're using SysAid Classic, see [Theme Colors in SysAid Classic](https://documentation.sysaid.com/classic/docs/theme-colors).
> - Users with SysAdmin permissions. To learn more about permissions, see [Managing Agent and Admin Permissions](https://documentation.sysaid.com/docs/managing-agent-permissions).

## How it works

SysAid includes two default themes, SysAid Theme and SysAid High Contrast. These default themes are locked: you can preview them, delete them, or duplicate them, but you can't edit their colors directly.

To customize a default theme, duplicate it first. The duplicate opens as a fully editable copy that you can rename and adjust. You can also create a theme from scratch instead of duplicating one. See [Managing themes](/docs/theme-colors#managing-themes).

Different companies in your account can also use different themes instead of all sharing the same account-wide default. For example, you might apply a branded theme to one company's Self-Service Portal and the default SysAid theme to another. To assign a specific theme to a company, see [Managing Companies](https://documentation.sysaid.com/docs/managing-companies).

## Theme color settings

Each theme controls the color of a specific set of Self-Service Portal elements. The following sections describe what each color setting affects, so you know what you're changing before you save a theme.

![Theme form with the color settings of the SysAid Theme](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/theme-colors-theme-form.png?sv=2026-02-06&spr=https&st=2026-11-13T07%3A54%3A15Z&se=2026-11-13T08%3A54%3A15Z&sr=c&sp=r&sig=NIA9aL%2BGMvUryQ6vgRNhuYzoP%2BdRSVqx71TlR6QeCIc%3D)

**The Self-Service Portal with the SysAid Theme:**

![Self-Service Portal with the SysAid Theme](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/theme-colors-ssp-sysaid-theme.png?sv=2026-02-06&spr=https&st=2026-11-13T07%3A54%3A15Z&se=2026-11-13T08%3A54%3A15Z&sr=c&sp=r&sig=NIA9aL%2BGMvUryQ6vgRNhuYzoP%2BdRSVqx71TlR6QeCIc%3D)

**The same page with the SysAid High Contrast theme:**

![Self-Service Portal with the SysAid High Contrast theme](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/theme-colors-ssp-high-contrast.png?sv=2026-02-06&spr=https&st=2026-11-13T07%3A54%3A15Z&se=2026-11-13T08%3A54%3A15Z&sr=c&sp=r&sig=NIA9aL%2BGMvUryQ6vgRNhuYzoP%2BdRSVqx71TlR6QeCIc%3D)

### Primary

The Primary element affects the following UI objects:

- Main buttons
- Active tab background
- Indicator background
- Fields displayed in list
- Dividers
- Link text
- Headings
- Toolbox Item icon

### Primary contrast

The Primary Contrast element affects elements that display the primary color as the text or the background. For examples, see the white text on the green buttons and the active tab in the SysAid Theme screenshot above.

### Background

The Background element affects the main background for all pages in the Self-Service Portal. For examples, see the white backgrounds in the screenshots above.

### Text

The Text element affects most of the text items in the Self-Service Portal.

### Headlines

The Headlines element affects the following UI objects:

- Page headlines
- Toolbox Item headlines
- Service record headlines

### Menu text

The Menu Text element affects the following UI objects:

- Text color for profile name
- Background color for main menu
- Field backgrounds on the service record submission form

### Button background

The Button Background element affects the background color of action buttons.

### Button content

The Button Content element affects the text color for action buttons.

### Hover

The Hover element affects the objects that change color when you hover over them.

### Header background

The Header Background element affects the header on the top of every page in the Self-Service Portal.

### Toolbar background

The Toolbar Background element affects the background of the toolbar underneath the header. For an example, see the light blue toolbar with the search box in the SysAid Theme screenshot above.

### Borders

The Borders element affects the borders of all fields and areas.

### Chatbot button (background color)

This Chatbot button setting affects the background color of the AI Chatbot button in the Self-Service Portal.

### Chatbot button (text and outline color)

This Chatbot button setting affects the text and outline color of the AI Chatbot button.

## Managing themes

### Adding a theme

1. Go to **Settings** > **Self-Service Portal** > **Themes**.
2. Click **+ New**.
3. Enter a **Theme name**.
4. Set a color for each theme element. See [Theme color settings](/docs/theme-colors#theme-color-settings).
5. (Optional) Leave **Users can switch to this theme** selected to let End Users choose this theme. It's selected by default. See [Letting end users choose their own theme](/docs/theme-colors#letting-end-users-choose-their-own-theme).
6. Click **Preview Theme** to see your changes, then click **Save**.

### Editing a theme

The two default themes, SysAid Theme and SysAid High Contrast, can't be edited directly. Duplicate a default theme first if you want to customize it. See [Duplicating a theme](/docs/theme-colors#duplicating-a-theme).

1. Go to **Settings** > **Self-Service Portal** > **Themes**.
2. Click the theme you want to edit.
3. Update the **Theme name** or any color setting. See [Theme color settings](/docs/theme-colors#theme-color-settings).
4. Click **Preview Theme** to see your changes, then click **Save**.

### Deleting a theme

To delete a theme:

1. Go to **Settings** > **Self-Service Portal** > **Themes**.
2. Select the checkbox next to the theme or themes you want to delete.
3. Click **Delete** at the top.

> [!NOTE]
> Please note:
> 
> If a deleted theme was assigned to a company, that company's theme is reset to the default option.

### Duplicating a theme

To duplicate a theme:

1. Go to **Settings** > **Self-Service Portal** > **Themes**.
2. Select the checkbox next to the theme you want to duplicate.
3. Click **Duplicate**.

The duplicate appears in the Themes list as a new, fully editable theme. See [Editing a theme](/docs/theme-colors#editing-a-theme).

## Applying a theme

### Setting the account-wide default theme

1. Go to **Settings** > **Self-Service Portal** > **Portal Settings**.
2. Under **Theme & Banner**, select a theme from the **Default theme** drop-down list.
3. Click **Save**.

All users in your account see this theme unless they belong to a company with a different theme assigned, or unless they've chosen a different available theme for themselves. See [Setting a theme for a specific company](/docs/theme-colors#setting-a-theme-for-a-specific-company) and [Letting end users choose their own theme](/docs/theme-colors#letting-end-users-choose-their-own-theme).

### Setting a theme for a specific company

You can assign a specific theme to a company so that only users from that company see it, instead of the account-wide default. For the full procedure, see [Managing Companies](https://documentation.sysaid.com/docs/managing-companies).

### Letting end users choose their own theme

End Users can choose their own theme from My Settings, independent of the account-wide default or their company's assigned theme.

1. Click your **user profile icon** in the top-right corner, then click **My Settings**.
2. Under **Custom theme**, select an available theme.
3. Click **Submit**.