Live Demo

Light/Dark Mode

This demo shows a smooth transition between light and dark themes. The toggle button animates and the colors transition smoothly.

Features

  • Smooth color transitions
  • System preference detection
  • Local storage persistence
  • Accessible toggle button

Current Theme

light Mode

Code

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --card-bg: #f8f9fa;
      --border-color: #e9ecef;
      --toggle-bg: #dee2e6;
      --toggle-handle: #ffffff;
    }
    
    [data-theme="dark"] {
      --bg-color: #1a1a1a;
      --text-color: #ffffff;
      --card-bg: #2d2d2d;
      --border-color: #404040;
      --toggle-bg: #4a4a4a;
      --toggle-handle: #ffffff;
    }
    
    * {
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    body {
      margin: 0;
      padding: 50px;
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      min-height: 100vh;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }
    
    .theme-toggle {
      position: relative;
      width: 60px;
      height: 30px;
      background: var(--toggle-bg);
      border-radius: 15px;
      cursor: pointer;
      border: none;
      outline: none;
    }
    
    .theme-toggle::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      background: var(--toggle-handle);
      border-radius: 50%;
      transition: transform 0.3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    [data-theme="dark"] .theme-toggle::before {
      transform: translateX(30px);
    }
    
    .card {
      background: var(--card-bg);
      padding: 30px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Theme Toggle Demo</h1>
      <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"></button>
    </div>
    
    <div class="card">
      <h2>Light/Dark Mode</h2>
      <p>This demo shows a smooth transition between light and dark themes. The toggle button animates and the colors transition smoothly.</p>
    </div>
    
    <div class="card">
      <h2>Features</h2>
      <ul>
        <li>Smooth color transitions</li>
        <li>System preference detection</li>
        <li>Local storage persistence</li>
        <li>Accessible toggle button</li>
      </ul>
    </div>
  </div>
  
  <script>
    const themeToggle = document.getElementById('themeToggle');
    const body = document.body;
    
    // Check for saved theme preference or default to system preference
    const currentTheme = localStorage.getItem('theme') || 
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    
    // Apply the theme
    body.setAttribute('data-theme', currentTheme);
    
    // Toggle theme
    themeToggle.addEventListener('click', () => {
      const currentTheme = body.getAttribute('data-theme');
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
      
      body.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);
    });
    
    // Listen for system theme changes
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) {
        body.setAttribute('data-theme', e.matches ? 'dark' : 'light');
      }
    });
  </script>
</body>
</html>