Implementing Dark Mode with Automatic Time Detection in WordPress: A Complete Guide

Introduction

Dark mode has become a popular feature in modern web design, reducing eye strain and improving battery life on OLED screens. Adding a dark mode toggle with automatic time detection enhances user experience (UX) by switching themes based on the time of day—light during the day and dark at night.

This guide covers how to implement dark mode with automatic time detection in WordPress, using CSS, JavaScript, and optional plugins for seamless integration.

Why Add Dark Mode with Time Detection?

• Improved Accessibility: Reduces eye strain in low-light conditions.
• Better UX: Users prefer automatic switching instead of manual toggling.
• Energy Efficiency: Dark mode saves battery on OLED/AMOLED screens.
• Modern Design Trend: Many top websites (Twitter, YouTube, macOS) support auto dark mode. Our YouTube channel; https://www.youtube.com/@easythemestore

Methods to Implement Dark Mode with Time Detection

1. Pure CSS & JavaScript (No Plugin)

This method uses CSS variables and JavaScript to detect system preferences and time-based changes.

Step 1: Add CSS Variables for Light/Dark Themes

:root {  
  --bg-color: #ffffff;  
  --text-color: #333333;  
  --link-color: #0066cc;  
}  

[data-theme="dark"] {  
  --bg-color: #121212;  
  --text-color: #e0e0e0;  
  --link-color: #4dabf7;  
}  

body {  
  background-color: var(--bg-color);  
  color: var(--text-color);  
  transition: background 0.3s ease;  
}  

a {  
  color: var(--link-color);  
}

Step 2: Add JavaScript for Time & System Preference Detection

// Check if dark mode should be enabled based on time (6 PM to 6 AM)  
function isNightTime() {  
  const hour = new Date().getHours();  
  return hour >= 18 || hour < 6;  
}  

// Check system preference (OS-level dark mode)  
function isSystemDarkMode() {  
  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;  
}  

// Apply dark mode if needed  
function applyDarkMode() {  
  if (isNightTime() || isSystemDarkMode()) {  
    document.documentElement.setAttribute('data-theme', 'dark');  
  } else {  
    document.documentElement.removeAttribute('data-theme');  
  }  
}  

// Run on page load & when system preference changes  
applyDarkMode();  
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyDarkMode);

Step 3: Add a Manual Toggle Button (Optional)

<button id="darkModeToggle">Toggle Dark Mode</button>  

<script>  
  document.getElementById('darkModeToggle').addEventListener('click', () => {  
    const currentTheme = document.documentElement.getAttribute('data-theme');  
    document.documentElement.setAttribute('data-theme', currentTheme === 'dark' ? '' : 'dark');  
  });  
</script>

2. Using WordPress Plugins (Easiest Method)

If you prefer a plugin-based solution, these options work well:

• Dark Mode for WordPress – Adds a simple dark mode toggle.
• WP Dark Mode – Supports automatic time-based switching.
• Darklup – Includes system preference detection.

How to Configure WP Dark Mode for Automatic Switching

1. Install WP Dark Mode from the WordPress plugin repository.
2. Go to WP Dark Mode > Settings > Advanced.
3. Enable “Auto Dark Mode” and set a time range (e.g., 6 PM to 6 AM).
4. Enable “Follow System Preference” for OS-level dark mode.

Best Practices for Dark Mode Implementation

• Test Contrast Ratios: Ensure text remains readable (WCAG compliance).
• Use SVG/Icons That Adapt: Avoid hard-coded colors in graphics.
• Optimize Images for Dark Mode: Some images may need adjustments.
• Store User Preference (LocalStorage): Save manual toggle choices.

Conclusion

Adding dark mode with automatic time detection improves UX, accessibility, and modernizes your WordPress site. Whether using pure CSS/JS or a plugin, implementing this feature ensures a seamless experience for users day and night.

By following these steps, your WordPress site will offer a sleek, user-friendly dark mode that automatically adapts to the time of day! 🌙💡