plane/apps/space/components/issues/navbar/theme.tsx

33 lines
837 B
TypeScript
Raw Normal View History

// 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>
);
});