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

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.

Success Color

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

Error Color

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

Warning Color

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

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.

Custom Text Header

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

Custom Text Header Highlight

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

Header Background

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

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

Progress-bar Color

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

Dashboard Logo

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

Favicon

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