Auto Dark Mode

Add a dark mode toggle to your WordPress site with automatic theme switching based on visitor system preferences. A floating button allows visitors to manually switch between light and dark modes.

Use Cases#

• Offer accessibility and comfort options for visitors
• Respect user system preferences (OS dark mode setting)
• Reduce eye strain for visitors browsing at night
• Provide a modern website experience

How It Works#

1. Enable the module in Switchboard
2. Configure position and default behavior
3. A floating toggle button appears on your site
4. Visitors click to switch between light/dark modes
5. The choice is optionally saved in their browser

Settings#

Default Mode Options#

Transition Speeds#

Toggle Button Positions#

Choose where the floating toggle button appears:

• Bottom Right - Most common, doesn’t interfere with content
• Bottom Left - Alternative if you have bottom-right widgets
• Top Right - Visible immediately, near header
• Top Left - Alternative top position

Dark Mode Styles#

The module applies automatic dark mode styles to common elements:

Images are slightly dimmed (90% opacity) in dark mode to reduce glare.

System Preference Detection#

When “Default Mode” is set to “Auto”, the module detects the visitor’s operating system preference:

• macOS: System Preferences → General → Appearance
• Windows: Settings → Personalization → Colors
• iOS: Settings → Display & Brightness
• Android: Settings → Display → Dark theme

The module listens for system preference changes in real-time, so if a visitor changes their OS theme while on your site, the site theme updates automatically (unless they’ve manually toggled).

Remember User Choice#

When enabled, the module saves the user’s manual toggle selection in their browser’s localStorage. This means:

• Their preference persists across page loads
• Their preference persists across browser sessions
• Manual choice overrides system preference detection
• Clearing browser data resets the preference

Accessibility Features#

The toggle button includes proper accessibility attributes:

• aria-label describing the current action
• title attribute for tooltip
• High contrast focus states
• Keyboard accessible (Tab + Enter)
• Appropriate button semantics

Theme Compatibility#

Dark mode works by adding a dark-mode class to the body element and applying CSS overrides. Most themes will display reasonably well, but some considerations:

Works Best With#

• Themes using standard HTML elements
• Themes with minimal custom background colors
• Themes without complex CSS gradients
• Light-colored default themes

May Require Adjustments For#

• Themes with many custom-colored elements
• Themes with image backgrounds
• Themes with complex layered designs
• Already-dark themes

Customizing Dark Mode Styles#

For advanced users who want to customize dark mode colors, you can add CSS to your theme:

body.dark-mode {
    --custom-background: #1a1a2e;
    --custom-text: #ffffff;
}

body.dark-mode .my-custom-element {
    background-color: var(--custom-background);
    color: var(--custom-text);
}

FAQ#