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:

{
  "palette": {
    "primary": {
      "main": "#47783B",
      "contrastText": "#F7FFF5"
    }
  }
}
Click to copy

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.

{
  "palette": {
    "admin": {
      "main": "#A3BDD6",
      "contrastText": "#1C3B59"
    }
  }
}
Click to copy

Set highlightAdminOptionsInMenu = true  in overlay/settings/config.json if the menu options should be highlighted as well.

overlay/settings/config.json

{
  "highlightAdminOptionsInMenu": true
}
Click to copy