---

---

<button id="theme-toggle" class="w-8 h-8 -mr-2 flex items-center justify-center cursor-pointer" aria-label="Change color scheme">
    <svg class="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <circle cx="8" cy="8" r="8"></circle>
    </svg>
</button>

<script>
    document.addEventListener('astro:page-load', () => {
        const theme = (() => {
            if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
                return localStorage.getItem('theme') || 'light';
            }
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                return 'dark';
            }
            return 'light';
        })();

        if (theme === 'light') {
            document.documentElement.classList.remove('dark');
        } else {
            document.documentElement.classList.add('dark');
        }

        window.localStorage.setItem('theme', theme);

        const handleToggleClick = () => {
            const element = document.documentElement;
            element.classList.toggle('dark');

            const isDark = element.classList.contains('dark');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
        };

        document.getElementById('theme-toggle')?.addEventListener('click', handleToggleClick);
    });
</script>

<script>
    document.addEventListener('astro:after-swap', () => {
        if (localStorage.theme === 'dark') {
            document.documentElement.classList.add('dark');
        }
    });
</script>
