Theme

On this page you will find instructions on how to set up a Theme.

In the Theme section under Administration - System you can select and customize the CONNECT wide theme and the colour palettes for dashboard charts, as well as upload logos to be used in the tenant.

Overview

On the Overview tab you have a quick overview of the theme colors, the chart color palette and the uploaded login screen logo. You can edit each of the three item groups by hovering them and clicking the edit icon or using the tabs to navigate to another screen.

Colors

On the Colors tab you can edit the main color palette of the theme or select a predefined color palette.

  • The primary colors are the colors displayed most frequently across your applications screens and components.

  • The secondary colors provide more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

  • The navigation colors set the color for the navigation on the left hand side.

To change any color:

  1. click on the color that you want to change,

  2. select a color from the color picker, or

  3. insert a Hex color code.

Chart Colors

On the Chart Colors tab you can edit the color palette used for dashboard charts. Also here you can select a predefined color palette.

Logos

Go to the Logos tab to upload a logo and a background image for your login page. Also, if you want to use a specific image in the navigation, this is where you can upload the file.

To upload a file:

  1. click the Upload Button, and

  2. select a file via drag-and-drop or the file explorer.

The upload for all common image formats is supported.

 

Name

Description

Name

Description

Primary Color

Buttons, Header of Dialogues, loading gif

Primary Color Light

Dashboard Icons background color

Primary Color Dark

 

Primary Contrast Color

 

Primary Text Color

 

Secondary Color

Icon for indicator code, Icon for selected Chart

Secondary Color Light

Icon for indicator calculation, Icon for non-selected Chart

Secondary Color Dark

 

Secondary Contrast Color

 

Secondary Text Color

 

Navigation Color

Color of the navigation bar

Navigation Title Color

 

Navigation Contrast Color

Text color of navigation bar