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