forked from github/plane
5b0066140f
* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
33 lines
837 B
TypeScript
33 lines
837 B
TypeScript
// next theme
|
|
import { useTheme } from "next-themes";
|
|
|
|
// mobx react lite
|
|
import { observer } from "mobx-react-lite";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export const NavbarTheme = observer(() => {
|
|
const [appTheme, setAppTheme] = useState("light");
|
|
|
|
const { setTheme, theme } = useTheme();
|
|
|
|
const handleTheme = () => {
|
|
setTheme(theme === "light" ? "dark" : "light");
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!theme) return;
|
|
|
|
setAppTheme(theme);
|
|
}, [theme]);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleTheme}
|
|
className="relative grid h-7 w-7 place-items-center rounded bg-custom-background-100 text-custom-text-100 hover:bg-custom-background-80"
|
|
>
|
|
<span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
|
|
</button>
|
|
);
|
|
});
|