我目前正在努力进入Svelte。这是我学习HTML，CSS和JS后的第一个框架。
我想在黑暗和光明模式之间切换。为此，我遵循了以下教程：https://www.youtube.com/watch?v=OyjZ7dezADw
唯一的区别是我使用标准的材质图标。
问题是页面加载后，我必须按两次黑暗模式按钮才能更改图标。视频中也描述了该问题，并使用onMount修复，但此修复对我不起作用。
我尝试了很多方法，但是在创建DOM时，变量darkTheme总是未定义。
有没有人碰巧有给初学者的小费？
__layout.svelte：

<script lang="ts">
  import { onMount } from "svelte";
  import TopAppBar, {
    Row,
    Section,
    Title,
    AutoAdjust,
  } from "@smui/top-app-bar";
  import IconButton from "@smui/icon-button";

  let topAppBar: TopAppBar;

  let darkTheme: boolean | undefined = undefined;

  onMount(() => {
    darkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
    darkTheme = darkTheme;
  });
</script>

<svelte:head>
  <!-- Dark and Lightmode CSS change-->
  <!-- SMUI Styles -->
  {#if darkTheme === undefined}
    <link
      rel="stylesheet"
      href="/smui.css"
      media="(prefers-color-scheme: light)"
    />
    <link
      rel="stylesheet"
      href="/smui-dark.css"
      media="screen and (prefers-color-scheme: dark)"
    />
  {:else if darkTheme}
    <link rel="stylesheet" href="/smui.css" />
    <link rel="stylesheet" href="/smui-dark.css" media="screen" />
  {:else}
    <link rel="stylesheet" href="/smui.css" />{/if}
</svelte:head>

<!--TopAppBar-->
<TopAppBar bind:this={topAppBar} variant="fixed" color="primary">
  <Row>
    <Section>
      <div style="display: flex; align-items: center;">
        <!--Darkmode Button-->
        <IconButton
          on:click={() => (darkTheme = !darkTheme)}
          class="material-icons"
          aria-label="Darkmode"
          >{darkTheme ? "light_mode" : "dark_mode"}</IconButton
        >
      </div>
      <Title>Test</Title>
    </Section>
    <Section align="end" toolbar>
      <IconButton class="material-icons" aria-label="calendar"
        >calendar_month</IconButton
      >
      <IconButton class="material-icons" aria-label="books"
        >menu_book</IconButton
      >
      <IconButton class="material-icons" aria-label="profile"
        >account_circle</IconButton
      >
    </Section>
  </Row>
</TopAppBar>
<AutoAdjust {topAppBar}>
  <slot />
</AutoAdjust>

<style>
  :global(.mdc-)

  /* Hide everything above this component. */
  :global(#smui-app),
  :global(body),
  :global(html) {
    display: block !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
  }
</style>