| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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
| Code Block |
|---|
{
"active": true,
... |
Set a theme for dark mode
In the json file set the active to true
| Code Block |
|---|
{
"dark": true,
... |
DSL location for the theme files
The JSON files most be placed in a themes folder in the web app folder
| Code Block |
|---|
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
| Code Block |
|---|
{
"active":false,
"dark": false,
"colors": {
"primary": "#e60000",
"secondary": "#BA0F0F",
"success": "#e60000"
}
} |
Dark theme
| Code Block |
|---|
{
"active":false,
"dark": true,
"colors": {
"primary": "#FF4A4A",
"secondary": "#BA0F0F"
}
} |
Blue
Light theme
| Code Block |
|---|
{
"active":false,
"dark": false,
"colors": {
"primary": "#015593",
"secondary": "#015593"
}
} |
Dark theme
| Code Block |
|---|
{
"active":false,
"dark": true,
"colors": {
"primary": "#226DA5",
"secondary": "#226DA5"
}
} |
Green
Light theme
| Code Block |
|---|
{
"active":false,
"dark": false,
"colors": {
"primary": "#69A943",
"secondary": "#00836B"
}
} |
Dark theme
| Code Block |
|---|
{
"active":false,
"dark": true,
"colors": {
"primary": "#69A943",
"secondary": "#00836B"
}
} |
Orange
Light theme
| Code Block |
|---|
{
"active":false,
"dark": false,
"colors": {
"primary": "#F3704D",
"secondary": "#F3704D"
}
} |
Dark theme
| Code Block |
|---|
{
"active":false,
"dark": true,
"colors": {
"primary": "#F3704D",
"secondary": "#F3704D"
}
} |
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
| Code Block |
|---|
{
"active":true,
"dark": false,
"colors": {
"background": "#E2E2E2",
"surface": "#F8F7F4",
"primary": "#464646",
"primary-darken-1": "#F8F7F4",
"secondary": "#333333",
"secondary-darken-1": "#384850",
"error": "#f77779",
"info": "#63a4d4",
"success": "#69A943",
"warning": "#e39681",
"menu-background": "#494e4f",
"menu-active": "#F8F7F4",
"footer-text-color": "#384850",
"darkmode-toggle": "#464646"
}
} |
Dark theme
| Code Block |
|---|
{
"active":true,
"dark": true,
"colors": {
"background": "#333333",
"surface": "#464646",
"primary": "#706D6D",
"secondary": "#00836B",
"secondary-darken-1": "#384850",
"error": "#EF4246",
"info": "#2b567a",
"success": "#69A943",
"warning": "#b27466",
"menu-background": "#464646",
"menu-active": "#F8F7F4",
"footer-text-color": "#ffffff",
"darkmode-toggle": "#F8F7F4"
}
} |
CSS Overrides
A new feature in version 1.59.x is the ability to add custom css overrides to your application. In order to achieve this you will need to add a css file named custom.css to the root of the static directory in your application.
| Code Block | ||
|---|---|---|
| ||
web-app
...
├── static
│ ├── custom.css
... |