I am trying to implement dark mode in my Next js project.

Here's 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 };
      }),
  };
});