Skip to main content
Version: 62.0.0

Customize Color Theme

Customize the Color Theme of the Service Dashboard

The color theme of the a9s Service Dashboard can be customized through the color properties in the BOSH release:

BOSH PropertyData TypeDescription
theme.titleStringTitle of the dashboard in the browser
theme.colors.primaryHexcode valueColor of all default components (including the progress bars if theme.colors.progress_bar property is not set)
theme.colors.successHexcode valueColor of success elements like the notification messages
theme.colors.errorHexcode valueColor of error elements like the notification messages
theme.colors.warningHexcode valueColor of warning elements like the notification messages
theme.colors.textHexcode valueDefault text color of the page
theme.colors.btn_primary_textHexcode valueText color of the restore and recreate buttons
theme.colors.custom_text_headerHexcode valueText color for the nav elements in the header
theme.colors.custom_text_header_highlightHexcode valueHighlight color for the nav elements in the header
theme.colors.header_backgroundHexcode valueHeader background color
theme.colors.error_page_backgroundHexcode valueBackground color of the not found (404) page
theme.colors.error_page_textHexcode valueText color of the not found (404) page
theme.colors.progress_barHexcode valueColor of the progress bars
theme.logoBase64 EncodeThe logo which is used in the dashboard
theme.faviconBase64 EncodeThe favicon which is used for the browser

These properties must be declared as in the example below:

    theme:
colors:
custom_text_header: '#FFFFFF'
custom_text_header_highlight: '#FFFFFF'
primary: '#E4833E'
success: '#52C41A'
error: '#E84242'
warning: '#FAAD14'
text: '#062035'
btn_primary_text: '#FFFFFF'
header_background: '#505D78'
error_page_background: '#505D78'
error_page_text: '#FFFFFF'
progress_bar: '#E4833E'
title: 'anynines Dashboard'
logo: data:image/png;base64,[...]
favicon: data:image/x-icon;base64,[...]
Logo and Favicon File Type

Please ensure that the file type of your Base64 encoded image matches the image's data type (e.g. a PNG image should start with data:image/png;base64,[...] while a JPEG image should start withdata:image/jpeg;base64,[...]), otherwise the image will not be loaded/displayed by the a9s Service Dashboard.

Dashboard Title

The theme.title property sets the title that the a9s Service Dashboard will display on the browser.

image

Primary Color

The theme.colors.primary property sets the color of all the default components, such as buttons, active elements on the nav bar, tab navigation, and the progress bars when the theme.colors.progress_bar property is not set.

image

Success Color

The property theme.colors.success set the color of all success notifications in the dashboard.

image

Error Color

The property theme.colors.error set the color of all error notifications in the dashboard.

image

Warning Color

The property theme.colors.warning set the color of all warning notifications in the dashboard.

image

Text Color

The property theme.colors.text sets the color of the default text on the dashboard.

Button Primary Text Color

The property theme.colors.btn_primary_text sets the text color of the Restore and Recreate buttons.

image

Custom Text Header

The property theme.colors.custom_text_header sets the text color of the main header.

image

Custom Text Header Highlight

The property theme.colors.custom_text_header_highlight sets the color of the main header's navigation highlight.

image

Header Background

The property theme.colors.header_background sets the background color of the main header.

image

Error Page Background Color

The property theme.colors.error_page_background sets the background color of the error pages, such as the "not found" error pages (404).

Error Page Background Text

The property theme.colors.error_page_text sets the text color of the error pages, such as the "not found" error page (404).

image

Progress-bar Color

The property theme.colors.progress_bar sets the color of the dashboard's progress-bars.

image

The property theme.logo sets the logo of the dashboard.

image

Favicon

The property theme.favicon set the Favicon of all dashboard related pages, including error pages.

image