37 lines
1.0 KiB
JavaScript
37 lines
1.0 KiB
JavaScript
import MoonP from "@/components/icons/MoonP";
|
|
import Sun from "@/components/icons/Sun";
|
|
import { Button } from "@mui/material";
|
|
import { useTheme } from "next-themes";
|
|
import { useState } from "react";
|
|
|
|
function Theme() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
useState(() => setMounted(true), []);
|
|
|
|
return (
|
|
<Button
|
|
className="
|
|
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
|
|
!w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
|
|
!h-[32px] md:!h-[36px] lg:!h-[40px]
|
|
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
|
|
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
|
|
"
|
|
// onClick={handleThemeSwitch}
|
|
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
|
|
variant="outlined"
|
|
>
|
|
<div className="block dark:hidden">
|
|
<MoonP />
|
|
</div>
|
|
<div className="hidden dark:block">
|
|
<Sun />
|
|
</div>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default Theme;
|