jarv.is/components/ThemeToggle/ThemeToggle.tsx

"use client";

import clsx from "clsx";
import { MoonIcon, SunIcon } from "lucide-react";
import { useTheme } from "../../hooks";
import type { ComponentPropsWithoutRef } from "react";
import type { LucideIcon } from "lucide-react";

export type ThemeToggleProps = ComponentPropsWithoutRef<LucideIcon>;

const ThemeToggle = ({ className, ...rest }: ThemeToggleProps) => {
  const [theme, setTheme] = useTheme();

  return (
    <button
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      aria-label="Toggle Theme"
      className="hover:text-warning block bg-none p-2.5 hover:cursor-pointer hover:border-none"
    >
      <SunIcon className={clsx("!block dark:!hidden", className)} {...rest} />
      <MoonIcon className={clsx("!hidden dark:!block", className)} {...rest} />
    </button>
  );
};

export default ThemeToggle;