using this theme toggle inside _layout.svelte

ThemeToggle.svelte

<script>
  let html, currentColorScheme = 'light'

  if (process.browser) {
    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="inline-block w-4 h-5 fill-one hover:fill-four" 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="inline-block w-4 h-5 fill-one hover:fill-four" 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>