Implementing Dark Mode with Automatic Time Detection in WordPress

Create a Smart, Eye-Friendly Dark Mode That Adapts to User Preferences and Time of Day

Dark mode has become an essential feature for modern websites, reducing eye strain and saving device battery life. When combined with automatic time detection, your WordPress site can intelligently switch between light and dark themes based on the user’s local time while still respecting their personal preferences.

This comprehensive guide will walk you through multiple implementation methods – from simple CSS solutions to advanced JavaScript techniques – ensuring your dark mode implementation is both sophisticated and user-friendly.

Why Implement Automatic Dark Mode in WordPress?

1. Enhanced User Experience – Automatically adapts to day/night cycles
2. Reduced Eye Strain – Dark interfaces are easier on eyes in low-light
3. Battery Savings – OLED screens use less power with dark colors
4. Modern Aesthetic – Professional, contemporary appearance
5. Competitive Advantage – Stand out with smart UI features. Our YouTube channel; https://www.youtube.com/@easythemestore

Implementation Approaches

1. Pure CSS Implementation (Simplest)

/* Default light mode */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* Dark mode based on OS preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f1f1f1;
  }
}

/* Time-based dark mode */
@media (prefers-color-scheme: dark), 
       (prefers-color-scheme: no-preference) and 
       (time: 18:00) and (time: 06:00) {
  :root {
    --bg-color: #121212;
    --text-color: #f1f1f1;
  }
}

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

Note: The time-based media query is experimental and may not be widely supported yet

2. JavaScript Implementation (More Reliable)

// Check for OS preference and time
function setColorScheme() {
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
  const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches;
  const hours = new Date().getHours();
  const isNightTime = hours >= 18 || hours <= 6;
  
  if (isDarkMode || (isNotSpecified && isNightTime)) {
    document.documentElement.classList.add('dark-mode');
  } else {
    document.documentElement.classList.add('light-mode');
  }
}

// Initial setup
setColorScheme();

// Watch for changes in OS preference
window.matchMedia('(prefers-color-scheme: dark)').addListener(setColorScheme);

3. WordPress-Specific Solutions

Option A: Using a Plugin

1. Dark Mode for WordPress – Adds toggle with time-based options
2. WP Dark Mode – Includes automatic switching features
3. Darklup – Premium plugin with scheduling options

Option B: Theme Implementation

Add to your theme’s functions.php:

function enqueue_dark_mode_script() {
  wp_enqueue_script(
    'dark-mode-script',
    get_template_directory_uri() . '/js/dark-mode.js',
    array(),
    '1.0',
    true
  );
}
add_action('wp_enqueue_scripts', 'enqueue_dark_mode_script');

Advanced Features

1. Local Storage for User Preference

// Save user preference
function setDarkModePreference(isDark) {
  localStorage.setItem('darkMode', isDark);
  document.documentElement.classList.toggle('dark-mode', isDark);
}

// Check for saved preference
const savedPreference = localStorage.getItem('darkMode');
if (savedPreference !== null) {
  document.documentElement.classList.toggle('dark-mode', savedPreference === 'true');
} else {
  setColorScheme(); // Use automatic detection
}

2. Smooth Transitions

body, .theme-element {
  transition: background-color 0.5s ease, 
              color 0.5s ease,
              border-color 0.5s ease;
}

3. Custom Time Range Selection

// Admin setting for custom time range
const darkModeStartHour = 19; // 7 PM
const darkModeEndHour = 7;    // 7 AM
const hours = new Date().getHours();
const isCustomNightTime = hours >= darkModeStartHour || hours <= darkModeEndHour;

Best Practices

1. Always Include a Toggle – Respect user choice above all
2. Test Color Contrast – Ensure readability in both modes
3. Adapt Images – Consider darker versions for dark mode
4. Browser Compatibility – Fallback to light mode when needed
5. Performance – Minimize repaints during transitions

Final Thoughts

Implementing dark mode with automatic time detection creates a sophisticated, user-friendly experience that adapts to both environmental conditions and personal preferences. By combining CSS media queries with JavaScript logic and local storage, you can build a solution that’s both intelligent and respectful of user choices.

Key Recommendations:

• Start with OS preference detection
• Layer time-based logic as an enhancement
• Always provide manual override
• Test across different devices and browsers
• Consider implementing in your theme for better performance

As dark mode becomes increasingly expected by users, implementing these features will keep your WordPress site at the forefront of modern web design trends.