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:
click on the color that you want to change,
select a color from the color picker, or
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:
click the Upload Button, and
select a file via drag-and-drop or the file explorer.
The upload for all common image formats is supported.
Â
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 |