Skip to main content
Version: 50.0.0

Customize Color Theme

Customize the Color Theme of the Service Dashboard

The color theme of the service dashboard can be customized through the color properties in the BOSH release:

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

These properties must be declared as in the example below:

      dashboard-app:
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 dashboard-app.theme.title property sets the title that the service dashboard will display on the browser.

image

Primary Color

The dashboard-app.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 dashboard-app.theme.colors.progress_bar property is not set.

image

Success Color

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

image

Error Color

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

image

Warning Color

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

image

Text Color

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

Button Primary Text Color

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

image

Custom Text Header

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

image

Custom Text Header Highlight

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

image

Header Background

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

image

Error Page Background Color

The property dashboard-app.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 dashboard-app.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 dashboard-app.theme.colors.progress_bar sets the color of the dashboard's progress-bars.

image

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

image

Favicon

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

image