Files
next-portfolio/src/app/_components/theme-switcher.tsx

29 lines
841 B
TypeScript

"use client";
import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
import type React from "react";
export default function ThemeSwitcher(): React.JSX.Element {
const toggleTheme = (): void => {
const currentTheme = document.documentElement.getAttribute("data-theme");
if (currentTheme === "nord") {
localStorage.theme = "dracula-soft";
document.documentElement.setAttribute("data-theme", "dracula-soft");
} else {
localStorage.theme = "nord";
document.documentElement.setAttribute("data-theme", "nord");
}
};
return (
<button
type="button"
className="btn w-9 h-9 btn-circle border-2 hover:bg-primary/25 border-primary/75 p-1 transition-colors duration-100"
onClick={toggleTheme}
>
<MoonIcon className="block dark:hidden" />
<SunIcon className="hidden dark:block" />
</button>
);
}