Dark Mode
Auto-detects your reader's system preference, with an optional manual toggle in the navigation. Designed to feel like a thoughtful magazine, not a Slack screenshot.
How it works
When Dark Mode is enabled, the plugin adds a tiny CSS variable override that swaps the cream paper backgrounds for deep ink, and inks for soft cream. Every component that uses CSS variables (which is everything in the theme) flips automatically.
The mode follows the visitor's system setting via the prefers-color-scheme media query. A reader who has macOS set to Dark sees the dark version automatically; a reader on Light sees the light version. No flash, no JavaScript-driven hydration delay.
Enabling Dark Mode
Go to Appearance → Customize → Pro Options → Dark Mode. Three settings:
- Mode — Off / Auto / Always Dark.
- Show toggle — display a sun/moon button in the navigation that lets readers manually override their system preference.
- Toggle position — left, right, or in the mobile menu only.
Manual toggle preference persists in localStorage. So if a reader on a Light system manually switches to Dark, the choice sticks for that browser.
Customizing the dark palette
The dark palette is a set of CSS custom properties. To override any value, add custom CSS via Customize → Additional CSS:
html[data-theme="dark"] {
--paper: #0f0f10;
--paper-deep: #1a1a1c;
--ink: #f5f0e8;
--accent: #e8c890;
}You can also target the system-preference variant if you don't want manual override styling to differ:
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--paper: #0f0f10;
}
}Images in dark mode
Photographs look fine on dark backgrounds, but flat illustrations and logos sometimes don't. The plugin adds a filter: brightness(.92) to images by default to slightly soften their punch in dark mode — this is a subtle effect and can be disabled with:
html[data-theme="dark"] .fr-card-image,
html[data-theme="dark"] .fr-hero-image {
filter: none;
}Performance
The dark mode CSS is roughly 4 KB gzipped. It's loaded as a separate file (so the cache invalidates independently from the main stylesheet) and it's only enqueued when Dark Mode is enabled in the Customizer. There's no flash-of-light-mode (FOUC) — the mode is detected before the body renders, via a small inline script in <head>.