Getting started with custom styling
This document will show you how to change the style of some common parts of the application. For more specific details please see the other articles in the styling section.
The recommendation is also to use the "overlay" configuration feature to minimize configuration and simplify future application updates.
We will introduce a custom color palette and also change some typography.
Files and folders
As we are using the overlay feature the files should be saved to the "overlay" folder, in this case the full path will be "overlay/settings"
Start by creating the file "overlay/settings/theme.json" and add the section for palette and typography, they can be empty to start with. Then refresh the web browser to verify that nothing has changed. Note that all changes to the "theme.json" file will take effect immediately, there is no need to restart the service for this kind of styling.
theme.json:
{
"palette": {},
"typography": {}
}Custom Dashboard
The brand color #5F2F8A should be used and also the header text size on the dashboard card should be increased and set to the brand color.
Add the primary color and the styling to the card header (h2).
theme.json:
{
"palette": {
"primary": {
"main": "#5F2F8A",
"dark": "#48004A",
"contrastText": "#000"
}
},
"typography": {
"h2": {
"fontSize": "24px",
"fontWeight": 400,
"color": "#5F2F8A",
"lineHeight": "30px"
}
}
}After refreshing the web browser it should look something like this:
Custom Action Buttons
The colors for the action buttons in the pending orders list should be changed to teal, yellow and pink. The buttons have their own palette names.
Add the styling to the palette, the contrast text for the change buttons is made black.
theme.json:
{
"palette": {
"accept": {
"main": "#009688",
"dark": "#00695f"
},
"change": {
"main": "#ffeb3b",
"dark": "#b2a429",
"contrastText": "#000000"
},
"delete": {
"main": "#e91e63",
"dark": "#a31545"
}
}
}After refreshing the web browser it should look something like this:
