Event id not been dispatch

[mylastore]

<DarkMode on:change={(e) => { console.log(e.detail); // "dark" | "light" }} />

The event is not dispatched only after a full browser reloads then I see the console log. Using this repo with the latest SvelteKit

[metonym]

When I use this component with SvelteKit, I see the change event being dispatched when the page mounts, and also whenever I update the theme.

Is this what you would expect? To help further, it would be useful if you could provide a minimal repro.

---

1. Load the page: "dark" is logged
2. Click the button --> "light" is logged

<script>
  import DarkMode from "svelte-dark-mode";

  let theme;

  $: switchTheme = theme === "dark" ? "light" : "dark";

  $: if (typeof document !== "undefined") {
    document.body.className = theme;
  }
</script>

<DarkMode
  bind:theme
  on:change={(e) => {
    console.log(e.detail); // "dark" | "light"
  }}
/>

<h1>This is {theme} mode.</h1>
<p>Change the theme and reload the page.</p>

<button on:click={() => (theme = switchTheme)}>
  Switch to {switchTheme} mode
</button>

<style>
  :global(.dark) {
    background: #032f62;
    color: #f1f8ff;
  }
</style>