Theme
UI Theme settings can be defined in MyPayter via specific advanced configuration settings. Alternatively a custom theme definition can be created by Payter so that it can be selected by name.
Theme settings can be applied to the following elements:
| Element | MyPayter Key | Value |
|---|---|---|
| Background color | background-color | RGB Hex color (e.g. e1f5fe) |
| Button background color | button-color | RGB Hex color (e.g. 039be5) |
| Button text color | button-label-color | RGB Hex color (e.g. ffffff) |
| Panel background color | panel-color | RGB Hex color (e.g. 29b6f6) |
| Panel title color | panel-label-color | RGB Hex color (e.g. 000000) |
| Panel subtitle color | panel-sub-label-color | RGB Hex color (e.g. 6a6a6a) |
| Progress bar / Spinner background color | slider-bg-color | RGB Hex color (e.g. 000000) |
| Progress bar / Spinner foreground color | slider-fg-color | RGB Hex color (e.g. 2e5c71) |
| Title color | title-color | RGB Hex color (e.g. 5b2c6a) |
| Style of built in icons | icons-color | Some icons, such as NFC landing icons, are built into the UI. There are two possible colors: White = 0 Black = 1 |
| Top Logo | logo-image | Asset name of logo to display at top of most screens. |
Contrast Checker
In order to ensure all text can be read, the terminal will check the contrast between different text and objects on screen.
If there is not sufficient contrast the Apollo terminal will deny the configuration and use default settings instead.
There are two different levels of contrast:
- Contrast between text and its background
- Contrast between objects and their background
The contrast for text is more important, therefore the requirements are stricter. Text needs a contrast ratio of 3 : 1 or higher to be accepted. Objects have less strict requirements, needing a ratio of 1.1 : 1 to be accepted. So the contrast between the elements has to comply to this table:
| Background element | Foreground element | Minimal contrast ratio |
|---|---|---|
background-color | button-color | 1.1 : 1 |
background-color | title-color | 1.1 : 1 |
background-color | panel-color | 1.1 : 1 |
background-color | slider-bg-color | 1.1 : 1 |
background-color | title-color | 3 : 1 |
button-color | buton-label-color | 3 : 1 |
panel-color | panel-label-color | 3 : 1 |
slider-bg-color | slider-fg-color | 3 : 1 |
The contrast can be verified beforehand using an online color contrast checker such as WebAIM: Contrast Checker.
If the configuration supplied does not meet the software’s contrast requirements, the UI will not be applied in it’s entirety. There is no error message implemented at this time.
Theme Assistance
Payter’s Product Delivery & Implementation team are on hand to provide assistance with configuring custom themes.