Dark Mode
Let visitors switch between light and dark color schemes.
Enable Dark Mode
- Appearance > Customize > Skin
- Toggle Enable Dark Mode to Yes
- Click Publish
A sun/moon toggle icon appears in your header.
Set Default Mode
Choose how your site loads for first-time visitors:
| Option | Behavior |
|---|---|
| Light | Site loads with light colors (most common) |
| Dark | Site loads in dark mode |
| Match System | Follows visitor’s device preference |
Customize Dark Mode Colors
Background Colors
Customize > Site Skin > Dark Mode Colors
| Setting | Recommendation |
|---|---|
| Site Background | Deep navy (#1a1a2e) |
| Content Areas | Dark blue-gray (#16213e) |
Avoid: Pure black (#000000) – too harsh
Text Colors
| Setting | Recommendation |
|---|---|
| Body Text | Light gray (#e0e0e0) |
| Headings | White or off-white |
Avoid: Pure white (#ffffff) for body text – causes eye strain
Dark Mode Logo
If your logo has dark colors that won’t show on dark backgrounds:
- Appearance > Customize > Site Identity
- Upload Dark Mode Logo
- Use light-colored version of your logo
- Keep same dimensions as regular logo
How It Works
For Visitors
- Toggle icon in header (sun = dark mode on, moon = light mode on)
- Click to switch
- Preference saved in browser
- Returns to their choice on next visit
What Changes
| Element | Light Mode | Dark Mode |
|---|---|---|
| Background | Light/white | Dark navy/gray |
| Text | Dark gray | Light gray |
| Cards | White | Dark gray |
| Buttons | Primary color | Adjusted for dark |
| Logo | Regular logo | Dark mode logo |
Preview
Light Mode:
Dark Mode:
Plugin Compatibility
Dark mode automatically applies to:
- BuddyPress/BuddyBoss (activity, profiles, groups)
- WooCommerce (shop, cart, checkout)
- LearnDash (courses, lessons)
- bbPress (forums)
Common Questions
Can I hide the toggle? No built-in option, but you can use CSS:
.dark-mode-toggle { display: none; }Does it slow down my site? No, color switching is instant with no performance impact.
Do I need a dark logo? Only if your regular logo is dark-colored.
Related
- Color Scheme – Main color settings
- Color Presets – Pre-built color schemes
- Site Identity – Logo settings
Need Help? support@wbcomdesigns.com