<script>
  import Icon from './Icon.svelte';
  import {onMount} from 'svelte';

  export let theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : 'light';

  const set_theme = () => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }

  const toggle = () => {
    theme = theme == 'light' ? 'dark' : 'light';
    set_theme();
  }

  onMount(() => {
    set_theme()
  });
</script>

{#if theme == 'dark'}
  <span on:click={ () => toggle() }>
    <Icon name="sunrise" size="32" />
  </span>
{:else}
  <span on:click={ () => toggle() }>
    <Icon name="sunset" size="32"/>
  </span>
{/if}

