how to move the window.matchMedia to <svelte:window>

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>

<!-- <svelte:window on:  /> -->


<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>