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

"use client";
import { useTheme } from "@wrksz/themes/client";
import { useEffect, useState } from "react";

export const ThemeChanger = () => {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  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>
  );
};