uma transição mais suave na alteração de temas é bom. Notei que você utilizou tailwindcss e Next.js, então em poucos minutos você consegue lidar isso.

Existe uma API chamada Match do browser. Eu customo utilizar bastante desta forma:

export const SwitchMode = () => {
  const [currentState, setCurrentState] = useState("");

  useEffect(() => {
    try {
      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        document.documentElement.classList.remove("light");
        localStorage.ThemeStorage = "dark";
        setCurrentState("dark");
        document.documentElement.classList.add(localStorage.ThemeStorage);
      } else {
        document.documentElement.classList.remove("dark");
        localStorage.ThemeStorage = "light";
        setCurrentState("light");
        document.documentElement.classList.add(localStorage.ThemeStorage);
      }
    } catch (menssage) {
      console.log(`Erro ao definir tema: ${menssage}`);
    }
  }, []);

  const toggleTheme = () => {
    try {
      const newCurrentMode =
        localStorage.ThemeStorage === "dark" ? "light" : "dark";
      localStorage.ThemeStorage = newCurrentMode;

      if (newCurrentMode === "dark") {
        document.documentElement.classList.remove("light");
        setCurrentState("dark");
        document.documentElement.classList.add(localStorage.ThemeStorage);
      } else {
        document.documentElement.classList.remove("dark");
        setCurrentState("light");
        document.documentElement.classList.add(localStorage.ThemeStorage);
      }
    } catch (menssage) {
      console.log(`Erro ao trocar o tema: ${menssage}`);
    }
  };

Da pra tornar mais personalizável com mais cores e transições. Até animações! Eu facilmente utilizaria todas as vezes. Apesar de simples, personalizar certos aspectos é complicado.