components/theme-toggle.js

class ThemeToggle extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                button {
                    transition: all 0.3s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .dark-icon, .light-icon {
                    transition: opacity 0.3s ease, transform 0.3s ease;
                }
                .dark .dark-icon {
                    opacity: 1;
                    transform: rotate(0deg);
                }
                .dark .light-icon {
                    opacity: 0;
                    transform: rotate(-90deg);
                }
                .light .light-icon {
                    opacity: 1;
                    transform: rotate(0deg);
                }
                .light .dark-icon {
                    opacity: 0;
                    transform: rotate(90deg);
                }
            </style>
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white p-2 rounded-full">
                <span class="light-icon absolute">
                    <i data-feather="sun"></i>
                </span>
                <span class="dark-icon absolute">
                    <i data-feather="moon"></i>
                </span>
            </button>
        `;

        const button = this.shadowRoot.querySelector('button');
        button.addEventListener('click', this.toggleTheme.bind(this));
    }

    toggleTheme() {
        const html = document.documentElement;
        if (html.classList.contains('dark')) {
            html.classList.remove('dark');
            html.classList.add('light');
            localStorage.setItem('theme', 'light');
        } else {
            html.classList.remove('light');
            html.classList.add('dark');
            localStorage.setItem('theme', 'dark');
        }
        feather.replace();
    }
}

customElements.define('theme-toggle', ThemeToggle);