document.addEventListener('DOMContentLoaded', function() {
    // Theme toggle functionality
    const themeToggle = document.createElement('div');
    themeToggle.className = 'fixed bottom-4 right-4 z-50';
    themeToggle.innerHTML = `
        <button id="theme-toggle" class="p-3 rounded-full shadow-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <i data-feather="moon" class="hidden dark:block"></i>
            <i data-feather="sun" class="block dark:hidden"></i>
        </button>
    `;
    document.body.appendChild(themeToggle);
    
    const themeToggleBtn = document.getElementById('theme-toggle');
    themeToggleBtn.addEventListener('click', function() {
        document.documentElement.classList.toggle('dark');
        localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        feather.replace();
    });

    // Check for saved theme preference or use preferred color scheme
    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    }
    
    feather.replace();
});

// Color palette generator function (example)
function generateRandomPalette() {
    const hues = Array.from({length: 5}, () => Math.floor(Math.random() * 360));
    return hues.map(hue => `hsl(${hue}, 100%, 50%)`);
}

// Example usage
console.log('Random color palette:', generateRandomPalette());