t-convex-nextjs-saas/src/components/core/ThemeChanger.tsx

"use client";
import { useTheme } from "@wrksz/themes/client";
import { useSyncExternalStore } from "react";

export const ThemeChanger = () => {
  const { theme, setTheme } = useTheme();
  const mounted = useSyncExternalStore(
    () => () => undefined,
    () => true,
    () => false,
  );

  if (!mounted) {
    return <p>Loading theme...</p>;
  }

  return (
    <div>
      <p>The current theme is: {theme}</p>
      <button type="button" onClick={() => setTheme("light")}>
        Light Mode
      </button>
      <button type="button" onClick={() => setTheme("dark")}>
        Dark Mode
      </button>
    </div>
  );
};