You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
homepage/src/components/theme-toggle.jsx

31 lines
967 B

import { useContext } from "react";
import { MdDarkMode, MdLightMode, MdToggleOff, MdToggleOn } from "react-icons/md";
import { ThemeContext } from "utils/theme-context";
export default function ThemeToggle() {
const { theme, setTheme } = useContext(ThemeContext);
if (!theme) {
return null;
}
return (
<div className="rounded-full flex self-end">
<MdLightMode className="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5" />
{theme === "dark" ? (
<MdToggleOn
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer"
/>
) : (
<MdToggleOff
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer"
/>
)}
<MdDarkMode className="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5" />
</div>
);
}