Ya te he subido otros videos donde te muestro cómo usar el dark y el light mode del tema de Tailwind.

En estete muestro un custom Hook que cambia el nodo superior directamente y se puede reutilizar en todo el sitio.

import { useState } from "react";

export default function useTheme() {
  const [theme, setTheme] = useState("light");

  const toggleTeam = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    document.documentElement?.classList.remove("dark", "light");
    document.documentElement?.classList.add(newTheme);
    setTheme(newTheme);
  };

  // podemos agregar guardado en... localstorage? cookies?

  return { theme, toggleTeam };
}

Puedes observar que es solo el inicio, podrías agregar localStorage o guardar el theme en una cookie.

export default function Index() {
  const { theme, toggleTeam } = useTheme();
  return (
    <div className="flex flex-col min-h-screen main dark:bg-indigo-950 max-w-sm px-4">
      <h2 className="dark:text-white">Cambia el tema</h2>
      <button
        onClick={toggleTeam}
        className="bg-blue-500 text-white texy-2xl p-4 dark:bg-indigo-500 rounded-lg"
      >
        Cambiar a {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
}

Ahora podemos usar nuestro custom Hook en cualquier parte de nuestra aplicación.

Puedes ver que el nodo superior cambia la clase entre light y dark.