--- 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." updated: 2022-06-08T11:04:50Z published: 2022-06-08T11:04:50Z --- > ## 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)![ThemesObjectsfilesDefaultTheme1.gif](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesDefaultTheme1.gif) **Custom theme** ![ThemesObjectsfilesFlowerColors.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesFlowerColors.jpg)![ThemesObjectsfilesFlowerTheme61.gif](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesFlowerTheme61.gif) ## Theme objects ![ThemesObjectsfilesThemesNumbered.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesThemesNumbered.jpg) ![ThemesObjectsfilesThemeNumbers1.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesThemeNumbers1.jpg) ![ThemesObjectsfilesThemeNumbers2.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesThemeNumbers2.jpg)![ThemesObjectsfilesThemeNumbers3.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesThemeNumbers3.jpg) ## Primary ![ObjectThemesefilesPrimary.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimary.jpg) 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) **Active tab background:** ![ObjectThemesefilesPrimaryActiveTabBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryActiveTabBackground.jpg) **Indicator background:** ![ObjectThemesefilesPrimaryIndicator.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryIndicator.jpg) **Fields displayed in list:** ![ObjectThemesefilesDisplayedListFields.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesDisplayedListFields.jpg) **Dividers:** ![ObjectThemesefilesPrimaryDividers.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryDividers.jpg) **Link text:** ![ObjectThemesefilesPrimaryLink2.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryLink2.jpg) **Headings:** ![ObjectThemesefilesPrimaryHeadings.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryHeadings.jpg) **Toolbox Item icon:** ![ObjectThemesefilesPrimaryIconColor.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryIconColor.jpg) ## Primary contrast ![ObjectThemesefilesPrimaryContrast.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesPrimaryContrast.jpg) 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) 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) 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) ## Headlines ![ObjectThemesefilesHeadlines.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesHeadlines.jpg) 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) **Toolbox Item headlines:** ![ThemesObjectsfilesHeadlines2.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesHeadlines2.jpg) **SR headlines:** ![ThemesObjectsfilesHeadlines1.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesHeadlines1.jpg) ## Menu text ![ObjectThemesefilesMenuText.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesMenuText.jpg) 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)** **Background color for main menu:** ![ThemesObjectsfilesProfileMenuBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesProfileMenuBackground.jpg) **Background color fields in the SR submission form:** ![ThemesObjectsfilesSumitFieldBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesSumitFieldBackground.jpg) ## Button background ![ObjectThemesefilesButtonBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesButtonBackground.jpg) 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) ![ThemesObjectsfilesActionButtons.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesActionButtons.jpg) ## Button content ![ObjectThemesefilesButtonContent.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesButtonContent.jpg) 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) 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) ![ThemesObjectsfilesAdminPortalHover.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ThemesObjectsfilesAdminPortalHover.jpg) ## Header background ![ObjectThemesefilesHeaderBackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesHeaderBackground.jpg) 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) ## Toolbar background ![ObjectThemesefilesToolbarbackgroundToolbarbackground.jpg](https://cdn.document360.io/52d3cb6c-cc81-43c2-b6f7-cbabcb449271/Images/Documentation/ObjectThemesefilesToolbarbackgroundToolbarbackground.jpg) 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) 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)**