document.addEventListener('DOMContentLoaded', () => {
    // Theme switcher logic if needed
    const themeToggle = document.createElement('div');
    themeToggle.className = 'fixed bottom-4 right-4 z-50';
    themeToggle.innerHTML = `
        <button id="themeToggle" class="p-3 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300">
            <i data-feather="moon" class="hidden dark:block"></i>
            <i data-feather="sun" class="dark:hidden"></i>
        </button>
    `;
    document.body.appendChild(themeToggle);
    
    document.getElementById('themeToggle').addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        feather.replace();
    });
    
    feather.replace();
    
    // Check for saved theme preference
    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
});