Dark Mode Toggle Source Code

<!-- DARK MODE TOGGLE PROJECT -->
<!-- Features: Light/Dark mode toggle, localStorage persistence, CSS variables, smooth transitions -->

<!-- HTML STRUCTURE -->
<div class="header">
    <h1>🌙 Dark Mode Toggle</h1>
    <div class="toggle-container">
        <span class="toggle-label">Dark Mode</span>
        <button class="toggle-switch" id="darkModeToggle"></button>
        <span class="icon" id="themeIcon">☀️</span>
    </div>
</div>

<!-- CSS VARIABLES AND THEMING -->
:root {
    --primary-color: #3b82f6;
    --bg-color: #ffffff;
    --text-color: #1f2937;
    --border-color: #e5e7eb;
    --card-bg: #f9fafb;
}

body.dark-mode {
    --primary-color: #60a5fa;
    --bg-color: #1f2937;
    --text-color: #f3f4f6;
    --border-color: #374151;
    --card-bg: #111827;
}

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

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

<!-- TOGGLE SWITCH STYLING -->
.toggle-switch {
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
}

.toggle-switch.active {
    background-color: var(--primary-color);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.3s ease;
}

.toggle-switch.active::after {
    left: 32px;
}

<!-- JAVASCRIPT CODE -->
// Initialize theme from localStorage
const toggle = document.getElementById('darkModeToggle');
const themeIcon = document.getElementById('themeIcon');
const currentTheme = localStorage.getItem('theme') || 'light';

if (currentTheme === 'dark') {
    document.body.classList.add('dark-mode');
    toggle.classList.add('active');
    themeIcon.textContent = '🌙';
} else {
    themeIcon.textContent = '☀️';
}

// Toggle dark mode on button click
toggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    toggle.classList.toggle('active');
    
    const isDarkMode = document.body.classList.contains('dark-mode');
    themeIcon.textContent = isDarkMode ? '🌙' : '☀️';
    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
});

<!-- KEY CONCEPTS -->
// CSS Custom Properties (--variable): Dynamic theming without reloading
// classList.toggle(): Add/remove classes based on state
// localStorage API: Persist user preferences across sessions
// ::after pseudo-element: Create toggle switch circle
// Event listeners: Respond to user interactions
// Smooth transitions: CSS transitions for theme changes