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 Property	Data Type	Description
theme.title	String	Title of the dashboard in the browser
theme.colors.primary	Hexcode value	Color of all default components (including the progress bars if theme.colors.progress_bar property is not set)
theme.colors.success	Hexcode value	Color of success elements like the notification messages
theme.colors.error	Hexcode value	Color of error elements like the notification messages
theme.colors.warning	Hexcode value	Color of warning elements like the notification messages
theme.colors.text	Hexcode value	Default text color of the page
theme.colors.btn_primary_text	Hexcode value	Text color of the restore and recreate buttons
theme.colors.custom_text_header	Hexcode value	Text color for the nav elements in the header
theme.colors.custom_text_header_highlight	Hexcode value	Highlight color for the nav elements in the header
theme.colors.header_background	Hexcode value	Header background color
theme.colors.error_page_background	Hexcode value	Background color of the not found (404) page
theme.colors.error_page_text	Hexcode value	Text color of the not found (404) page
theme.colors.progress_bar	Hexcode value	Color of the progress bars
theme.logo	Base64 Encode	The logo which is used in the dashboard
theme.favicon	Base64 Encode	The 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.

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.

Success Color

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

Error Color

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

Warning Color

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

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.

Custom Text Header

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

Custom Text Header Highlight

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

Header Background

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

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).

Progress-bar Color

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

Dashboard Logo

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

Favicon

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