Skip to main content
Version: Latest

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 defined in the a9s Service Dashboard Properties.

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.

a9s Service Dashboard Title​

The theme.title property sets the title that the a9s Service Dashboard will display on the browser.

image

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.

image

Success Color​

The property theme.colors.success set the color of all success notifications in the a9s Service Dashboard.

image

Error Color​

The property theme.colors.error set the color of all error notifications in the a9s Service Dashboard.

image

Warning Color​

The property theme.colors.warning set the color of all warning notifications in the a9s Service Dashboard.

image

Text Color​

The property theme.colors.text sets the color of the default text on the a9s Service Dashboard.

Button Primary Text Color​

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

image

Custom Text Header​

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

image

Custom Text Header Highlight​

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

image

Header Background​

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

image

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

image

Progress-bar Color​

The property theme.colors.progress_bar sets the color of the a9s Service Dashboard's progress-bars.

image

The property theme.logo sets the logo of the a9s Service Dashboard.

image

Favicon​

The property theme.favicon set the Favicon of all a9s Service Dashboard related pages, including error pages.

image