Frontend/src/app/components/theme-toggle-button.tsx

"use client";

import { MoonIcon, SunIcon } from "@heroicons/react/16/solid";
import { useTheme } from "next-themes";
import { ReactElement } from "react";

export function ToggleThemeButton(): ReactElement {
  const { theme, setTheme } = useTheme();

  return (
    <button
      className="p-2 rounded-lg"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      aria-label="Toggle Theme"
    >
      {theme === "dark" ? <SunIcon width={24} height={24} /> : <MoonIcon width={24} height={24} color="#000" />}
    </button>
  );
}