🌙 Dark Mode Toggle

3 implementations: toggle switch, system preference detection, and localStorage persistence.

The Engineering Behind Modern Dark Mode Implementation

Designing a professional dark mode toggle is about more than just flipping background colors; it is a critical requirement for modern accessibility and user experience. At UI Studio, we focus on high-performance, lightweight implementations that utilize CSS Custom Properties (Variables) and native JavaScript to prevent the "theme flash" during page loads. By adopting a system-aware approach, your web applications can automatically respect the user's OS-level preferences while still providing a manual override for personalized comfort.A successful dark mode strategy should prioritize soft dark grays rather than absolute blacks to maintain optimal text contrast and reduce eye strain in low-light environments. Utilizing a palette built on native CSS color functions allows for a responsive UI that adapts seamlessly without requiring heavy external JavaScript frameworks. Our approach ensures that every interactive element—from standard text to complex animated cards—maintains its visual integrity regardless of the active theme.

📋 Copy Code

<!-- CSS Variables -->
:root {
  --bg-primary: #f8fafc;
  --text-primary: #0f172a;
  --border: #e2e8f0;
}

[data-theme="dark"] {
  --bg-primary: #0f172a;
  --text-primary: #f1f5f9;
  --border: #334155;
}

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

<!-- HTML Toggle Switch -->
<label class="theme-switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider"></span>
</label>

<!-- JavaScript (Core) -->
function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
  const toggle = document.getElementById('darkModeToggle');
  if (toggle) toggle.checked = (theme === 'dark');
}

function getSystemTheme() {
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

// Initialize
const savedTheme = localStorage.getItem('theme');
setTheme(savedTheme || getSystemTheme());

// Listen to toggle
document.getElementById('darkModeToggle').addEventListener('change', (e) => {
  setTheme(e.target.checked ? 'dark' : 'light');
});

• CSS Variables: Define colors in :root and override with [data-theme="dark"]
• localStorage: Saves user preference across sessions
• System Detection: window.matchMedia('(prefers-color-scheme: dark)')
• Smooth Transition: CSS transition on body colors
• No Dependencies: Pure HTML/CSS/JS

Technical Breakdown: Persisting User Preferences

To ensure your dark mode choice remains active across multiple sessions, our snippets leverage the browser's localStorage API. This allows the website to "remember" the user's last selected state, preventing the UI from reverting back to a default white background every time a new page is clicked.The JavaScript logic we provide is designed to be placed at the very top of your document's . This specific placement ensures that the theme-checking function executes before the browser begins its first paint, eliminating the jarring flicker of light that often plagues poorly implemented toggles. Combined with the prefers-color-scheme CSS media query, this creates a three-state toggle system: Light, Dark, or System Default.

← Back to all snippets