Next.js项目暗黑模式切换按钮失效，仍依赖浏览器主题的问题求助

我正在我的Next.js项目里实现暗黑模式功能，目前代码逻辑看起来没问题，但遇到了一个头疼的问题：切换按钮没法正确切换主题，还是跟着浏览器的系统主题走。下面是我当前的代码实现，麻烦帮我看看哪里出问题了！

我的Theme Store代码 #

import { create } from "zustand";

export const useThemeStore = create((set) => {
  let storedTheme = localStorage.getItem("theme");

  if (!storedTheme) {
    const systemPrefersDark = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;
    storedTheme = systemPrefersDark ? "dark" : "light";
    localStorage.setItem("theme", storedTheme);
    document.documentElement.classList.toggle(storedTheme);
  }


  return {
    theme: storedTheme,
    toggleTheme: () =>
      set((state: { theme: string }) => {
        const newTheme = state.theme === "light" ? "dark" : "light";
        document.documentElement.classList.toggle("dark", newTheme === "dark");
        localStorage.setItem("theme", newTheme);
        // alert("Theme changed to " + newTheme);
        return { theme: newTheme };
      }),
  };
});

Tailwind配置文件（tailwind.config.ts） #

import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class", // Ensures dark mode works with manual toggle
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;

切换按钮组件代码 #

<div className="sm:absolute  flex items-center gap-4 cursor-pointer">
  <Around
    toggled={theme === "dark"}
    onToggle={toggleTheme}
    className="h-full w-full text-3xl"
    duration={750}
  />
</div>

目前看起来一切逻辑都是对的——localStorage里的主题变量能正常保存，html标签上也能正确加上dark类，但就是切换按钮点了之后，主题不会跟着变，还是依赖浏览器的系统主题设置，这可太奇怪了！

备注：内容来源于stack exchange，提问作者Debanshu Panigrahi