mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
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 w-7 h-7 grid place-items-center bg-custom-background-100 hover:bg-custom-background-80 text-custom-text-100 rounded"
|
|
>
|
|
<span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
|
|
</button>
|
|
);
|
|
});
|