Custom Styling
This document will show you how to customise the styling of the application.
Custom color theme
There are two primary colors that are used (except black and white), a main color and a contrastText color ( should be set to stand out from the main color).
To change the main colors of the application you create a new theme.json file in the “overlay/settings” folder and overwrite the primary object.
Here is an example where the main color and the contrastText has been modified.
overlay/settings/theme.json:
<p>{
"palette": {
"primary": {
"main": "#47783B",
"contrastText": "#F7FFF5"
}
}
}</p>
There is also a primary dark color that is used on hover/select/focus, it can generally be left out since it is set to grey by default to darken the main color. If that is not the desired behaviour it can be overwritten by adding "dark" to the primary object in the example above.
Accept, Delete and Change
These colors are primarily used on buttons to delete, accept or change something. We recommend not being overly creative if modifying them. Dark is used on hover/select effects and is preferably set to a darker variation of the main color.
{ "palette": { "accept": { "main": "#67AD5C", "dark": "#E05142",
"contrastText": "#FFFFFF"
}, "delete": { "main": "#E05142", "dark": "#93362B", "contrastText": "#FFFFFF" }, "change": { "main": "#F29F39", "dark": "#B6772B",
"contrastText": "#FFFFFF"
} } }
Admin Features
It is also possible to make the administration cards stand out in the dashboard by overwriting the admin object in the palette.
<p>{
"palette": {
"admin": {
"main": "#A3BDD6",
"contrastText": "#1C3B59"
}
}
}</p>
Set highlightAdminOptionsInMenu = true
in overlay/settings/config.json
if the menu options should be highlighted as well.
overlay/settings/config.json
<p>{
"highlightAdminOptionsInMenu": true
}</p>