---
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-07-05T06:48:20Z
published: 2026-07-05T06:48:20Z
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

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

This theme configuration results in the Self-Service Portal colors that appear in the images displayed below.

**Default SysAid theme** ![ThemesObjectsfilesTheme.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesTheme.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)![ThemesObjectsfilesDefaultTheme1.gif](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesDefaultTheme1.gif?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Custom theme** ![ThemesObjectsfilesFlowerColors.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesFlowerColors.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)![ThemesObjectsfilesFlowerTheme61.gif](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesFlowerTheme61.gif?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Theme objects

![ThemesObjectsfilesThemesNumbered.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesThemesNumbered.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

![ThemesObjectsfilesThemeNumbers1.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesThemeNumbers1.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

![ThemesObjectsfilesThemeNumbers2.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesThemeNumbers2.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)![ThemesObjectsfilesThemeNumbers3.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesThemeNumbers3.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Primary

![ObjectThemesefilesPrimary.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimary.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D) The Primary element affects the following UI objects:

**Main buttons:**

![ObjectThemesefilesPrimarySubmitButtons.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimarySubmitButtons.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Active tab background:** ![ObjectThemesefilesPrimaryActiveTabBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryActiveTabBackground.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Indicator background:**

![ObjectThemesefilesPrimaryIndicator.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryIndicator.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Fields displayed in list:**

![ObjectThemesefilesDisplayedListFields.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesDisplayedListFields.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Dividers:**

![ObjectThemesefilesPrimaryDividers.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryDividers.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Link text:**

![ObjectThemesefilesPrimaryLink2.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryLink2.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Headings:** ![ObjectThemesefilesPrimaryHeadings.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryHeadings.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Toolbox Item icon:**

![ObjectThemesefilesPrimaryIconColor.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryIconColor.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Primary contrast

![ObjectThemesefilesPrimaryContrast.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryContrast.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

The Primary Contrast element affects elements that display the primary color as the text or the background. For examples, see the white text and backgrounds in the Primary section above.

## Background

![ObjectThemesefilesBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesBackground.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

The Background element affects the main background for all pages in the Self-Service Portal. For examples, see the white backgrounds in the screenshots on the top of this page.

## Text

![ObjectThemesefilesText.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesText.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

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

![ThemesObjectsfilesText.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesText.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Headlines

![ObjectThemesefilesHeadlines.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesHeadlines.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

The Headlines element affects the following UI objects:

**Page headlines:** ![ThemesObjectsfilesHeadlines3.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesHeadlines3.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Toolbox Item headlines:** ![ThemesObjectsfilesHeadlines2.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesHeadlines2.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**SR headlines:** ![ThemesObjectsfilesHeadlines1.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesHeadlines1.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Menu text

![ObjectThemesefilesMenuText.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesMenuText.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

The Menu Text element affects the following UI objects:

**Text color for profile name:**

**![ThemesObjectsfilesProfileText.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesProfileText.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)**

**Background color for main menu:**

![ThemesObjectsfilesProfileMenuBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesProfileMenuBackground.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

**Background color fields in the SR submission form:**

![ThemesObjectsfilesSumitFieldBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesSumitFieldBackground.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Button background

![ObjectThemesefilesButtonBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesButtonBackground.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

The Button Background element affects the background color of action buttons such as those below:

![ThemesObjectsfilesSubmitButton.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesSubmitButton.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

![ThemesObjectsfilesActionButtons.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesActionButtons.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Button content

![ObjectThemesefilesButtonContent.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesButtonContent.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

The Button Content element affects thetext color for action buttons such as the ones displayed above.

## Hover

![ObjectThemesefilesHover.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesHover.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

The Header Background element affects the objects that change color when you hover your mouse over them.

![ThemesObjectsfilesAddNoteHover.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesAddNoteHover.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

![ThemesObjectsfilesAdminPortalHover.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesAdminPortalHover.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Header background

![ObjectThemesefilesHeaderBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesHeaderBackground.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

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

![ThemesObjectsfilesTopBarBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesTopBarBackground.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

## Toolbar background

![ObjectThemesefilesToolbarbackgroundToolbarbackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesToolbarbackgroundToolbarbackground.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

The Toolbar Background element affects the background of the toolbar underneath the heading. See the image in the Header background section above.

## Borders

![ObjectThemesefilesBorders.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesBorders.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)

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

**![ThemesObjectsfilesBorderColor.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesBorderColor.jpg?sv=2026-02-06&spr=https&st=2026-10-17T03%3A24%3A11Z&se=2026-10-17T04%3A24%3A11Z&sr=c&sp=r&sig=tANCukPfakh6xbWQGk8VJmYWu%2BXeEy%2B2mwFENiN%2B7GY%3D)**