Appearance
Dark Mode
Uisce includes a built-in dark mode. A toggle button in the header lets visitors switch between light and dark. Their preference is saved in their browser and remembered across visits.
What it looks like
Click the moon/sun icon in the preview header to see the switch in action.
Light mode
How it works
The dark mode toggle appears automatically in the header. There are no theme settings to configure — it works out of the box.
When a visitor clicks the toggle:
- The toggle sets a
data-theme="dark"(ordata-theme="light") attribute on the<html>element. - The theme's dark mode stylesheet overrides CSS colour variables for every section, regardless of which colour scheme the section uses — all sections go dark together.
- The visitor's preference is saved in their browser (via localStorage).
- On their next visit, the store loads in whichever mode they last chose.
Visitors whose operating system is set to dark mode see the store in dark mode on their first visit, even without toggling. The theme uses a CSS prefers-color-scheme: dark media query to handle this automatically.
Customizing your dark mode colors
The dark mode colour palette — background (#1a1a1a), text (#f5f5f5), primary (#60a5fa), and border (#333) — is defined in the assets/dark-mode.css file. These values cannot be changed from the theme editor.
Merchants who need a different dark palette can add CSS variable overrides in Theme settings > Custom CSS, targeting the [data-theme='dark'] selector:
css
[data-theme='dark'] {
--color-background: #0d1117;
--color-foreground: #e6edf3;
}Tips
- Test your images in dark mode. Product photos on white backgrounds can look harsh against a dark background. Transparent PNGs or photos with neutral backgrounds work better.
- The visitor's choice is saved. If someone manually toggles to light mode, their preference sticks across visits.
- The default follows the visitor's OS. Visitors with OS dark mode see dark mode on their first visit. An explicit toggle saves to localStorage and overrides the OS setting going forward.