<script lang="ts">
    import { onMount } from 'svelte';
    import Fa from 'svelte-fa'
    import {faSun, faMoon} from '@fortawesome/free-regular-svg-icons'

    let darkMode = false;
    const THEME_KEY = 'themePreference';

    function setDarkTheme(dark: boolean) {
        darkMode = dark;
        document.documentElement.classList.toggle('dark', darkMode);
    }

    function toggleMode() {
        setDarkTheme(!darkMode);
        window.localStorage.setItem(THEME_KEY, darkMode ? 'dark' : 'light');
    }

    onMount(() => {
        const theme = window.localStorage.getItem(THEME_KEY);
        setDarkTheme(theme === 'dark' || (theme == null && window.matchMedia('(prefers-color-scheme: dark)').matches))
    });
</script>
<div on:click={toggleMode}>
    {#if darkMode}
        <Fa fw icon={faMoon} />
    {:else}
        <Fa fw icon={faSun} />
    {/if}
</div>