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,[...]
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.