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

"use client";

import { useTheme } from "next-themes";
import { MoonIcon } from "./icon/moon-icon";
import { SunIcon } from "./icon/sun-icon";

export function ToggleThemeButton(): JSX.Element {
  const { theme, setTheme } = useTheme();

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