How to Create a Dark Mode Toggle with CSS

:root {
  /* Light mode (default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --accent-color: #3b82f6;
}

/* Dark mode variables */
.dark {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border-color: #374151;
  --accent-color: #60a5fa;
}

/* Alternative: Using data attribute */
[data-theme="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border-color: #374151;
  --accent-color: #60a5fa;
}

/* Apply variables to elements */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

a {
  color: var(--accent-color);
}

:root {
  /* Light mode (default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
}

/* Automatically switch to dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
  }
}

/* Override with manual selection */
:root.light {
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
}

:root.dark {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
}

<!-- Simple text toggle -->
<button
  id="theme-toggle"
  class="theme-toggle"
  aria-label="Toggle dark mode"
>
  <span class="light-icon">Light</span>
  <span class="dark-icon">Dark</span>
</button>

<!-- Icon toggle with sun/moon -->
<button
  id="theme-toggle"
  class="theme-toggle"
  aria-label="Toggle dark mode"
  title="Toggle theme"
>
  <!-- Sun icon (shown in dark mode) -->
  <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="5"/>
    <line x1="12" y1="1" x2="12" y2="3"/>
    <line x1="12" y1="21" x2="12" y2="23"/>
    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
    <line x1="1" y1="12" x2="3" y2="12"/>
    <line x1="21" y1="12" x2="23" y2="12"/>
    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
  </svg>

  <!-- Moon icon (shown in light mode) -->
  <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
  </svg>
</button>

.theme-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: var(--border-color);
}

/* Show/hide icons based on theme */
.sun-icon {
  display: none;
}

.moon-icon {
  display: block;
}

.dark .sun-icon {
  display: block;
}

.dark .moon-icon {
  display: none;
}

/* Text toggle variant */
.light-icon {
  display: none;
}

.dark-icon {
  display: block;
}

.dark .light-icon {
  display: block;
}

.dark .dark-icon {
  display: none;
}

/* Animated toggle switch style */
.toggle-switch {
  position: relative;
  width: 60px;
  height: 30px;
  background: var(--bg-secondary);
  border-radius: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: var(--accent-color);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.dark .toggle-switch::after {
  transform: translateX(30px);
}

// Get the toggle button
const themeToggle = document.getElementById('theme-toggle');

// Toggle dark mode on click
themeToggle.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
});

// Alternative: Using data attribute
themeToggle.addEventListener('click', () => {
  const currentTheme = document.documentElement.dataset.theme;
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = newTheme;
});

// Theme manager with localStorage persistence
const ThemeManager = {
  // Get the stored theme or default to system preference
  getTheme() {
    const stored = localStorage.getItem('theme');
    if (stored) {
      return stored;
    }
    // Check system preference
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light';
  },

  // Set theme and save to localStorage
  setTheme(theme) {
    document.documentElement.classList.remove('light', 'dark');
    document.documentElement.classList.add(theme);
    localStorage.setItem('theme', theme);
  },

  // Toggle between light and dark
  toggle() {
    const current = document.documentElement.classList.contains('dark')
      ? 'dark'
      : 'light';
    const newTheme = current === 'dark' ? 'light' : 'dark';
    this.setTheme(newTheme);
  },

  // Initialize on page load
  init() {
    const theme = this.getTheme();
    this.setTheme(theme);

    // Listen for system theme changes
    window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', (e) => {
        // Only auto-switch if user hasn't set a preference
        if (!localStorage.getItem('theme')) {
          this.setTheme(e.matches ? 'dark' : 'light');
        }
      });
  }
};

// Initialize theme on page load
ThemeManager.init();

// Add click handler to toggle button
document.getElementById('theme-toggle')
  .addEventListener('click', () => ThemeManager.toggle());

<!-- Add this in <head> BEFORE your CSS -->
<script>
  // Immediately apply theme to prevent flash
  (function() {
    const theme = localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.classList.add(theme);
  })();
</script>

<!-- Alternative: Using data attribute -->
<script>
  (function() {
    const theme = localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.dataset.theme = theme;
  })();
</script>

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

  <!-- Prevent flash of wrong theme -->
  <script>
    (function() {
      const theme = localStorage.getItem('theme') ||
        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      document.documentElement.classList.add(theme);
    })();
  </script>

  <style>
    :root {
      --bg-primary: #ffffff;
      --bg-secondary: #f3f4f6;
      --text-primary: #111827;
      --text-secondary: #6b7280;
      --border-color: #e5e7eb;
      --accent-color: #3b82f6;
    }

    .dark {
      --bg-primary: #111827;
      --bg-secondary: #1f2937;
      --text-primary: #f9fafb;
      --text-secondary: #9ca3af;
      --border-color: #374151;
      --accent-color: #60a5fa;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: system-ui, sans-serif;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.3s, color 0.3s;
      min-height: 100vh;
      padding: 2rem;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }

    .theme-toggle {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 8px 16px;
      cursor: pointer;
      color: var(--text-primary);
      font-size: 14px;
      transition: all 0.2s;
    }

    .theme-toggle:hover {
      border-color: var(--accent-color);
    }

    .card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 1rem;
    }

    h1 { margin-bottom: 0.5rem; }
    p { color: var(--text-secondary); }

    /* Icon visibility */
    .sun-icon { display: none; }
    .moon-icon { display: inline; }
    .dark .sun-icon { display: inline; }
    .dark .moon-icon { display: none; }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>My Website</h1>
      <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
        <span class="sun-icon">Light Mode</span>
        <span class="moon-icon">Dark Mode</span>
      </button>
    </header>

    <div class="card">
      <h2>Welcome!</h2>
      <p>This page supports dark mode. Click the button above to toggle themes. Your preference will be saved.</p>
    </div>

    <div class="card">
      <h2>How it works</h2>
      <p>We use CSS custom properties for theming, localStorage for persistence, and a script in the head to prevent flash.</p>
    </div>
  </div>

  <script>
    const ThemeManager = {
      getTheme() {
        return localStorage.getItem('theme') ||
          (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      },

      setTheme(theme) {
        document.documentElement.classList.remove('light', 'dark');
        document.documentElement.classList.add(theme);
        localStorage.setItem('theme', theme);
      },

      toggle() {
        const current = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
        this.setTheme(current === 'dark' ? 'light' : 'dark');
      },

      init() {
        // Theme already set by script in head
        window.matchMedia('(prefers-color-scheme: dark)')
          .addEventListener('change', (e) => {
            if (!localStorage.getItem('theme')) {
              this.setTheme(e.matches ? 'dark' : 'light');
            }
          });
      }
    };

    ThemeManager.init();
    document.getElementById('theme-toggle')
      .addEventListener('click', () => ThemeManager.toggle());
  </script>
</body>
</html>