mirror of
https://github.com/StanGirard/quivr.git
synced 2024-12-23 11:23:00 +03:00
df694819fa
* fix: Types * chore: Restructure * feature: Hero Section * feature: Navbar * feature: Tertiary Button * feature: Add Video * fix: Video responsive * feature: Dark Mode toggle * fix: Contrast * feature: Store dark mode in localstorage * style: Colors and bg blur
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
"use client";
|
|
import { FC, useEffect, useLayoutEffect, useState } from "react";
|
|
import Button from "../ui/Button";
|
|
import { MdDarkMode, MdLightMode } from "react-icons/md";
|
|
|
|
interface DarkModeToggleProps {}
|
|
|
|
const DarkModeToggle: FC<DarkModeToggleProps> = ({}) => {
|
|
const [dark, setDark] = useState(false);
|
|
|
|
useLayoutEffect(() => {
|
|
const isDark = localStorage.getItem("dark");
|
|
if (isDark && isDark === "true") {
|
|
document.body.parentElement?.classList.add("dark");
|
|
setDark(true);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (dark) {
|
|
document.body.parentElement?.classList.add("dark");
|
|
localStorage.setItem("dark", "true");
|
|
} else {
|
|
document.body.parentElement?.classList.remove("dark");
|
|
localStorage.setItem("dark", "false");
|
|
}
|
|
}, [dark]);
|
|
|
|
return (
|
|
<Button
|
|
aria-label="toggle dark mode"
|
|
className="focus:outline-none"
|
|
onClick={() => setDark((d) => !d)}
|
|
variant={"tertiary"}
|
|
>
|
|
{dark ? <MdLightMode /> : <MdDarkMode />}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default DarkModeToggle;
|