How To Create A Dark Mode Toggle Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Toggle Example</title>
<style>
  /* ---- CSS Variables power the entire theme ---- */
  :root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #64748b;
    --accent: #6366f1;
  }

/* Dark mode overrides all variables in one place */
  body.dark-mode {
    --bg: #0f172a;
    --surface: #1e293b;
    --border: #334155;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #818cf8;
  }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s, color 0.3s;
    min-height: 100vh;
  }

/* ---- HEADER WITH TOGGLE ---- */
  header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s, border-color 0.3s;
  }
  .site-name { font-weight: 700; font-size: 1.3em; color: var(--accent); }

/* Toggle Switch */
  .toggle-wrapper { display: flex; align-items: center; gap: 10px; font-size: 0.9em; color: var(--text-muted); }
  .toggle-switch { position: relative; width: 52px; height: 28px; cursor: pointer; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-track {
    position: absolute; inset: 0;
    background: #cbd5e1;
    border-radius: 100px;
    transition: background 0.3s;
  }
  .toggle-track::after {
    content: ''; position: absolute;
    left: 4px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px;
    background: white;
    border-radius: 50%;
    transition: left 0.3s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
  .toggle-switch input:checked ~ .toggle-track { background: var(--accent); }
  .toggle-switch input:checked ~ .toggle-track::after { left: 28px; }

/* ---- CONTENT ---- */
  .content { max-width: 800px; margin: 48px auto; padding: 0 32px; }
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 20px;
    transition: background 0.3s, border-color 0.3s;
  }
  .card h2 { margin-bottom: 10px; color: var(--text); }
  .card p { color: var(--text-muted); line-height: 1.7; }
  .tag { display: inline-block; padding: 4px 12px; background: var(--accent); color: white; border-radius: 20px; font-size: 0.8em; margin-top: 14px; }

/* ---- FOOTER (uses the same CSS variables, so it switches with the theme!) ---- */
  footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    text-align: center;
    padding: 24px 32px;
    margin-top: 40px;
    font-size: 0.85em;
    transition: background 0.3s, border-color 0.3s;
  }
  footer a { color: var(--accent); text-decoration: none; }
  footer a:hover { text-decoration: underline; }
</style>
</head>
<body>

<header>
  <div class="site-name">&#128218; ReadingNook</div>
  <div class="toggle-wrapper">
    <span>&#9728;&#65039;</span>
    <label class="toggle-switch" aria-label="Toggle dark mode">
      <input type="checkbox" id="dark-toggle">
      <span class="toggle-track"></span>
    </label>
    <span>&#127770;</span>
  </div>
</header>

<div class="content">
  <div class="card">
    <h2>The Art of Minimal Design</h2>
    <p>Minimalism in web design isn't just about empty space. It's a disciplined choice about what to include, and the incredible restraint of knowing what to leave out. Great design makes life simple.</p>
    <span class="tag">Design</span>
  </div>
  <div class="card">
    <h2>Why Dark Mode Feels Better at Night</h2>
    <p>Studies suggest that reduced blue light exposure in the evening has measurable physiological effects. Dark interfaces significantly reduce eye strain in low-light environments.</p>
    <span class="tag">Science</span>
  </div>
</div>

<footer>
  <p>&copy; 2026 ReadingNook &bull; <a href="#">About</a> &bull; <a href="#">Newsletter</a> &bull; <a href="#">Privacy Policy</a></p>
</footer>

// On load, restore the user's saved preference
  if (localStorage.getItem('darkMode') === 'true') {
    document.body.classList.add('dark-mode');
    toggle.checked = true;
  }

// When toggled, apply the class and save the preference
  toggle.addEventListener('change', () => {
    document.body.classList.toggle('dark-mode', toggle.checked);
    localStorage.setItem('darkMode', toggle.checked);
  });
</script>

</body>
</html>