mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
96399c7112
* feat: filters in plane deploy implemented multi-level dropdown for plane deploy * style: spacing and fonts * feat: plane deploy implemented authentication/theming, created/modified all the required store & services * devL reactions, voting, comments and theme
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
// react
|
|
import { useEffect } from "react";
|
|
|
|
// next theme
|
|
import { useTheme } from "next-themes";
|
|
|
|
// mobx react lite
|
|
import { observer } from "mobx-react-lite";
|
|
// mobx
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
import { RootStore } from "store/root";
|
|
|
|
export const NavbarTheme = observer(() => {
|
|
const store: RootStore = useMobxStore();
|
|
|
|
const { setTheme, theme } = useTheme();
|
|
|
|
const handleTheme = () => {
|
|
store?.theme?.setTheme(store?.theme?.theme === "light" ? "dark" : "light");
|
|
setTheme(theme === "light" ? "dark" : "light");
|
|
document?.documentElement.setAttribute("data-theme", theme ?? store?.theme?.theme);
|
|
};
|
|
|
|
useEffect(() => {
|
|
document?.documentElement.setAttribute("data-theme", theme ?? store?.theme?.theme);
|
|
}, [theme, store]);
|
|
|
|
return (
|
|
<div
|
|
className="relative w-[28px] h-[28px] flex justify-center rounded-md items-center rounded-sm cursor-pointer bg-custom-background-100 hover:bg-custom-background-200 hover:bg-custom-background-200/60 text-custom-text-100 transition-all"
|
|
onClick={handleTheme}
|
|
>
|
|
{theme === "light" ? (
|
|
<span className={`material-symbols-rounded text-[18px]`}>dark_mode</span>
|
|
) : (
|
|
<span className={`material-symbols-rounded text-[18px]`}>light_mode</span>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|