Svelte暗黑模式按钮需点击两次才切换图标，新手求助

你的问题核心在于darkTheme变量初始值为undefined，导致首次点击时状态逻辑混乱，加上onMount的初始化没有在页面初始渲染时同步更新图标状态。以下是具体修复步骤：

1. 修复变量初始值，避免undefined #

把darkTheme的初始值从undefined改为直接获取系统深色模式偏好（非SSR场景），或者设置一个默认布尔值（SSR场景）：

非SSR的纯Svelte应用 #

直接在脚本里初始化，无需等待onMount：

<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 = window.matchMedia("(prefers-color-scheme: dark)").matches;

  // 可选：监听系统主题变化，自动同步
  onMount(() => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", (e) => {
      darkTheme = e.matches;
    });
  });
</script>

SvelteKit等SSR场景 #

因为SSR时window不存在，所以在onMount里初始化，同时给darkTheme一个默认布尔值：

<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 = false;

  onMount(() => {
    darkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
    // 可选：监听系统主题变化，自动同步
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", (e) => {
      darkTheme = e.matches;
    });
  });
</script>

2. 移除无用代码 #

你onMount里的darkTheme = darkTheme;是完全冗余的，直接删掉即可。

3. 额外优化：持久化用户选择（可选） #

如果想让用户切换的主题在刷新页面后保留，可以用localStorage存状态：

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

  onMount(() => {
    // 优先读取本地存储的用户选择，没有则用系统偏好
    const savedTheme = localStorage.getItem("darkTheme");
    if (savedTheme !== null) {
      darkTheme = savedTheme === "true";
    } else {
      darkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
    }

    // 监听系统主题变化，仅当用户没手动切换过时同步
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", (e) => {
      if (!localStorage.getItem("darkTheme")) {
        darkTheme = e.matches;
      }
    });
  });

  // 修改点击事件，保存到localStorage
  const toggleTheme = () => {
    darkTheme = !darkTheme;
    localStorage.setItem("darkTheme", darkTheme.toString());
  };
</script>

然后把按钮的点击事件改成on:click={toggleTheme}。

问题根源解析 #

初始darkTheme是undefined，页面渲染时{darkTheme ? "light_mode" : "dark_mode"}会因为undefined是假值，显示dark_mode。当onMount设置darkTheme为系统偏好（比如true），组件应该更新图标，但如果此时用户点击按钮，第一次点击会把undefined转为true（因为!undefined === true），这会导致状态和实际系统偏好冲突，需要第二次点击才能回到正确的切换逻辑。给darkTheme一个初始布尔值就能彻底解决这个问题。

内容的提问来源于stack exchange，提问作者Grabenkind