switch theme between light and dark

ThemeToggle.svelte

<script>
import { onMount } from 'svelte';
let html, currentColorScheme = 'light';

onMount(
  () => {
    html = document.getElementsByTagName('html')[0]

    window.matchMedia('(prefers-color-scheme: dark)').addListener(({ matches }) => {
      if (matches) {
        html.dataset.theme = 'dark';
        currentColorScheme = 'dark';
      } else {
        html.dataset.theme = 'light';
        currentColorScheme = 'light';
      }
    })
});
</script>

<fieldset>
  <div class="pulse-four-times">
    {#if currentColorScheme === 'light'}
      <label for="one" on:click={ () =>  ( html.dataset.theme = 'dark', currentColorScheme = 'dark' ) }>
	      <svg class="fill-one hover:fill-four inline-block h-5 w-4" viewBox="0 0 20 20"><path d="M7 13.33a7 7 0 1 1 6 0V16H7v-2.67zM7 17h6v1.5c0 .83-.67 1.5-1.5 1.5h-3A1.5 1.5 0 0 1 7 18.5V17zm2-5.1V14h2v-2.1a5 5 0 1 0-2 0z"/></svg>
	    </label>
    {:else }
      <label for="two" on:click={ () => html.dataset.theme = 'light',  currentColorScheme = 'light' }>
	      <svg class="fill-one hover:fill-four inline-block h-5 w-4" viewBox="0 0 20 20"><path d="M7 13.33a7 7 0 1 1 6 0V16H7v-2.67zM7 17h6v1.5c0 .83-.67 1.5-1.5 1.5h-3A1.5 1.5 0 0 1 7 18.5V17zm2-5.1V14h2v-2.1a5 5 0 1 0-2 0z"/></svg>
	    </label>
    {/if}
  </div>
</fieldset>