Theme
Switch between light and dark mode, choose a colour preset, and fine-tune individual colours to match your store's brand.
The In-Store App lets you personalise the display on each device — from a simple light/dark toggle to picking one of eight built-in colour presets, right through to overriding individual colour slots (accent, background, card, and text) with any colour you like. All changes are saved immediately to the device with no Save step required.
This page covers the Dark Mode toggle, choosing a preset, and using the advanced Customize Theme tool.
Opening Theme Settings
Theme and appearance controls live in the Display section of Settings:
- Open Settings (tap the gear icon in the sidebar).
- Scroll to the Display section.
You will see two controls relevant to theming:
| Control | Description |
|---|---|
| Dark Mode | Switch that toggles the entire app between light and dark mode. Subtitle: Use dark theme. |
| Theme | List tile that opens the colour-preset picker. Subtitle: Choose a color theme. |
Switching between light and dark mode
Tap the Dark Mode toggle in the Display section. The app switches modes immediately and a snackbar confirms Dark mode enabled or Dark mode disabled.
The Dark Mode toggle affects the whole device. Both the light and dark colour palettes can be customised independently using the Customize Theme tool described below.
Choosing a colour preset
Tap Theme in the Display section. The Theme dialog opens, showing eight built-in presets in a grid.
| Preset | Character |
|---|---|
| Omnium Classic | The default teal palette |
| Midnight Blue | Deep navy with cool blue accents |
| Forest | Natural greens with earthy warmth |
| Warm Sand | Warm beige and terracotta tones |
| Slate | Cool, professional grey |
| Sunset | Warm coral and orange tones |
| Lavender | Soft purple with violet accents |
| Ocean | Deep blue-green inspired by the sea |
Each preset card shows a mini preview using the preset's scaffold, card, accent, and text colours in the current brightness mode. The active preset is highlighted with an accent-coloured border.
Tap a preset to apply it. The dialog closes, the app updates immediately, and a snackbar confirms Theme updated.
Selecting a new preset clears any custom colour overrides you have set with the Customize Theme tool (see below). The preset's full colour set is applied fresh.
Fine-tuning individual colours
For precise control over individual colour slots, tap the tune icon (sliders symbol) in the top-right corner of the Theme dialog. The dialog closes and the Customize Theme page opens.
Mode indicator
At the top of the Customize Theme page is a mode indicator card showing which mode you are currently editing:
- Sun icon + Editing light mode colors — you are editing the light palette
- Moon icon + Editing dark mode colors — you are editing the dark palette
A Dark Mode switch in this card lets you flip between light and dark editing without leaving the page. Colour changes you make apply only to the active mode.
Colour slots
Below the mode indicator, four colour slots are listed in a card. Each slot controls a different part of the app's visual style:
| Slot | Subtitle | What it affects |
|---|---|---|
| Accent | Buttons, icons, and highlights | The primary brand colour used on interactive elements |
| Background | Main background color | The scaffold and outer background of every screen |
| Card | Panels and card surfaces | List items, cards, and panel backgrounds |
| Text | Primary text color | Headings and body text across the app |
Each slot tile shows the current effective colour as a 36×36 swatch on the right. Slots that have a custom override applied show an undo icon to the left of the swatch.
Changing a colour
Tap the colour swatch on any slot tile. The colour picker dialog opens, titled with the slot name (e.g. Accent).
The colour picker has four areas:
| Area | How to use |
|---|---|
| Saturation / Lightness gradient | Drag within the gradient area — left/right changes saturation, up/down changes lightness |
| Hue bar | Drag the handle along the rainbow bar to change the hue |
| Preview + hex input | Shows a 48×48 preview of the current colour; type a 6-character hex code (without #) to jump directly to a colour |
| Quick-pick grid | 55 curated colour swatches (reds, oranges, yellows, greens, teals, cyans, blues, indigos, purples, pinks, and neutrals); tap any swatch to jump to that colour |
Tap Apply to apply the chosen colour to the slot. Tap Cancel to discard the selection.
Removing a single override
To revert one slot back to the preset colour while keeping other overrides, tap the undo icon that appears to the left of the colour swatch when an override is set. The slot immediately reverts to the underlying preset colour.
Live preview
Below the colour slots, a PREVIEW label introduces a mini card that renders in real time using the current effective colours. It shows an app bar stripe, a product card, and example buttons — both active and inactive — so you can judge the result before navigating away.
Resetting all custom overrides
To remove all custom colour overrides for both light and dark modes and return to the selected preset:
- Tap Reset in the AppBar (the button with a refresh icon is only visible when overrides exist).
All custom overrides are cleared immediately and the preset colours are restored in both modes.
Reset clears custom overrides for both light and dark modes at once, not just the mode you are currently editing.
How changes are saved
All theme changes — toggling dark mode, selecting a preset, or adjusting individual colour slots — are saved to the device immediately. There is no Save button and no Discard option.