Scale Theme's dark mode with automatic detection and palette mapping.
Dark Mode
Scale Theme offers an intelligent dark mode that adapts to your visitors' preferences.
Activation
| Setting | Description | Default |
|---|---|---|
| Dark mode enabled | Enables the feature | Off |
| Default behavior | Visitor's initial mode | System |
Default behavior
| Option | Description |
|---|---|
| System | Follows the visitor's OS preferences (prefers-color-scheme) |
| Light | Always light by default, toggle available |
| Dark | Always dark by default, toggle available |
Color conversion
Scale Theme offers 2 methods for converting colors in dark mode:
Auto mode
The theme automatically converts all palettes to a single target palette (dark). This is the simplest method.
| Setting | Description | Default |
|---|---|---|
| Target palette | The palette used in dark mode | Scheme 3 |
💡Create a dedicated dark palette (e.g., Scheme 3) with a dark background and light text. Auto mode will apply it everywhere.
Manual mode
You map each light palette to a specific dark palette. More control but more configuration.
| Source palette | -> Dark palette |
|---|---|
| Scheme 1 | -> Scheme 3 (default) |
| Scheme 2 | -> Scheme 3 |
| Scheme 3 | -> Scheme 3 |
| Scheme 4 | -> Scheme 4 |
| Scheme 5 | -> Scheme 5 |
| Scheme 6 | -> Scheme 6 |
Persistence
The visitor's choice is saved in localStorage. On their next visit, the chosen mode is automatically restored.
For the header
A toggle button (sun/moon icon) appears in the header when dark mode is enabled, allowing the visitor to switch at any time.