Beautiful in Every Environment
WP Documentation ships with a perfectly crafted dark mode that works automatically, looks stunning, and respects your readers’ preferences — no extra plugins needed.
Try it now: click the moon/sun icon in the header → watch everything transform instantly.
Three Smart Modes (You Choose)
| Mode | Behavior | Best For |
|---|---|---|
| Auto | Follows your device/OS setting (default) | Most users – just works |
| Light | Forces light mode permanently | Bright offices, print, branding |
| Dark | Forces dark mode permanently | Night owls, AMOLED screens, cool vibe |
Change anytime in Appearance → Customize → Color Scheme or let readers toggle with one click.
See the Difference (Live Comparison)
Light Mode
- Clean, high-contrast text
- Perfect for daylight reading
- Matches most corporate branding
Dark Mode
- True black background (saves battery on OLED)
- Reduced eye strain at night
- All syntax highlighting adjusted automatically
What Changes in Dark Mode (Everything!)
| Element | Light Mode | Dark Mode | Notes |
|---|---|---|---|
| Background | Pure white | True black (#000) | No gray – saves max battery |
| Text | Deep charcoal | Soft white (#e2e8f0) | High readability |
| Code blocks | Light syntax | Dark syntax (One Dark) | Uses Shiki + custom dark themes |
| Mermaid diagrams | Light theme | Dark theme | Auto-switches |
| Images | Unchanged | Slight brightness boost | Prevents “washed out” look |
| Search overlay | Light newspaper | Dark newspaper | Matches site perfectly |
| Sidebar & header | Subtle shadows | Elevated cards | Feels premium |
Technical Details (Nerd Level)
- Uses CSS custom properties (–color-frost-* palette)
- Zero flash on load (prefers-color-scheme detection in <head>)
- Stores user choice in localStorage → remembered forever
- Fully accessible (WCAG AA contrast in both modes)
- Works with print styles (forces light mode when printing)
Customization (Brand It Your Way)
Go to WP Dashboard → WP Documentation → Customize an pick a color you want