forked from github/plane
29 lines
874 B
TypeScript
29 lines
874 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
// 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 handleTheme = () => {
|
||
|
|
store?.theme?.setTheme(store?.theme?.theme === "light" ? "dark" : "light");
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="relative w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer bg-gray-100 hover:bg-gray-200 hover:bg-gray-200/60 text-gray-600 transition-all"
|
||
|
|
onClick={handleTheme}
|
||
|
|
>
|
||
|
|
{store?.theme?.theme === "light" ? (
|
||
|
|
<span className={`material-symbols-rounded text-[18px]`}>dark_mode</span>
|
||
|
|
) : (
|
||
|
|
<span className={`material-symbols-rounded text-[18px]`}>light_mode</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|