Implementing Dark Mode in Jekyll

Name: TalkXO
Address: New Delhi, Delhi, IN
Telephone: +91-XXXXXXXXXX
Price range: $$

January 5, 2024 1 min read

Dark mode has become an essential feature for modern websites. Here’s how to implement it effectively in Jekyll themes.

CSS Custom Properties

The foundation of dark mode implementation is CSS custom properties:

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #007acc;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --accent-color: #4a9eff;
}

JavaScript Implementation

// Theme persistence
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
  document.documentElement.setAttribute('data-theme', 'dark');
}

User Experience Considerations

Smooth Transitions: Use CSS transitions for theme changes
System Preference: Respect user’s OS theme preference
Persistence: Remember user’s choice across sessions
Accessibility: Ensure sufficient color contrast

Benefits

Reduced eye strain in low-light environments
Better battery life on OLED displays
Modern user experience
Accessibility compliance

Dark mode isn’t just a trend—it’s becoming a standard expectation for modern web applications.