🌙 Dark Mode Toggle

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

<!-- 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