Theming the UI
- Hugo van Schalkwyk
- jcrowther
Description
The UI allows you to change the base colours of your site. By changing these colours you can bring the site closer to that of your client’s corporate identity.
How to change the default colours
The method to change the colours is to add the overriding colours to a JSON file/s to the DSL code. These will then override the standard colours. Only the colours in the JSON file will override the standard colour, so if you only wish to change the primary colour for example then only add that to the JSON file.
You can have as many json files as you like in the themes folder, but you can only have 2 active files. These should be used as light theme and the dark theme.
Set a theme as active
In the json file set the active to true
{
"active": true,
...Set a theme for dark mode
In the json file set the active to true
{
"dark": true,
...DSL location for the theme files
The JSON files most be placed in a themes folder in the web app folder
HELIUM_WEB_APP
...
> web_app
> themes
- light_theme.json
- dark_theme.json
Preset themes
Here is a set of predetermined themes that will work well with the current design.
Red - (Vodacom)
Light theme
Dark theme
Blue
Light theme
Dark theme
Green
Light theme
Dark theme
Orange
Light theme
Dark theme
All possible colours that you can change
Here is an example of every colour on the site that you can override. You can play around with the basic color set to see what works. Note that these colours are used through out the site and changing one might not only change the object you are hoping for.
The frontend uses a vue and vuetify as frameworks. Vuetify picks up the background colour and then automatically adjust the text colour for maximum contrast.
Light theme
Dark theme