Dark mode
Your public booking site and guest portal can automatically switch to a dark theme for visitors whose phone or computer is set to dark mode — no work needed on your part. You control this from the Dark mode card on the Website Settings page (/website/settings).
It just works by default
Out of the box, dark mode is set to "Show a dark version of my site (recommended)". When a visitor's device prefers dark mode, your site automatically renders with a dark background and light text — and switches back to light for everyone else. There's no toggle for the visitor to find; it simply matches what their device already prefers.
This includes your navbar and footer, which automatically darken along with the rest of the page. You don't end up with a bright white bar at the top or bottom of an otherwise dark page — everything adapts together for a consistent look.
Your brand colours (the Primary Color and Accent Color from the Branding card) carry over into dark mode by default, so your site still looks like your brand. The navbar and footer switch to neutral dark colours rather than reusing the colours from the Navigation & Footer card, and the page background, card surfaces, and body text adapt for readability on a dark background. You can choose your own dark navbar and footer colours below.
Customising your dark-mode colours
If you'd rather choose your own dark colours instead of the automatic defaults, turn on Customise dark-mode colours underneath the dark-mode dropdown (only shown while dark mode is set to "Show a dark version of my site"). This reveals colour pickers grouped into two sections:
- Navigation & Footer — Navbar Background (dark), Navbar Text (dark), Footer Background (dark), Footer Text (dark).
- Page & Brand — Background (dark), Card / Surface (dark), Text (dark), Primary Color (dark), Accent Color (dark).
Pick each colour with the swatch or type a hex value, the same way you set your regular (light) colours. These dark colours only apply when a visitor's device is in dark mode — your light-mode site is unaffected. If you're not sure what to choose, leave the defaults in place; they're designed to work well with most brand colours.
Click Save Settings at the bottom of the page to apply your changes. If you turn Customise dark-mode colours back off, your site reverts to the automatic dark defaults next time you save.
Turning dark mode off
If you'd prefer your site to always look the same regardless of the visitor's device, set the dropdown to "Always show my site in light mode" and Save Settings. Your site will render in your normal light theme for every visitor, even those with dark mode enabled on their device. The dark colour pickers are hidden while this option is selected, since they no longer apply.
Quick reference
| Setting | What it does |
|---|---|
| Show a dark version of my site (recommended) | Site follows the visitor's device — dark for dark-mode visitors, light for everyone else. Nav and footer auto-darken. |
| Always show my site in light mode | Site always renders light, regardless of the visitor's device. |
| Customise dark-mode colours (toggle) | Reveals 9 colour pickers for the dark theme; only visible when dark mode is set to Auto, and only affects the dark theme. |