import { useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; import { useTheme } from "next-themes"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; import useToast from "hooks/use-toast"; // layouts import { AppLayout } from "layouts/app-layout"; import { WorkspaceSettingLayout } from "layouts/setting-layout"; // components import { CustomThemeSelector, ThemeSwitch } from "components/core"; import { WorkspaceSettingHeader } from "components/headers"; // ui import { Spinner } from "@plane/ui"; // constants import { I_THEME_OPTION, THEME_OPTIONS } from "constants/themes"; const ProfilePreferencesPage = observer(() => { const { user: userStore } = useMobxStore(); // states const [currentTheme, setCurrentTheme] = useState(null); // computed const userTheme = userStore.currentUser?.theme; // hooks const { setTheme } = useTheme(); const { setToastAlert } = useToast(); useEffect(() => { if (userTheme) { const userThemeOption = THEME_OPTIONS.find((t) => t.value === userTheme?.theme); if (userThemeOption) { setCurrentTheme(userThemeOption); } } }, [userTheme]); const handleThemeChange = (themeOption: I_THEME_OPTION) => { setTheme(themeOption.value); userStore.updateCurrentUserTheme(themeOption.value).catch(() => { setToastAlert({ title: "Failed to Update the theme", type: "error", }); }); }; return ( }> {userStore.currentUser ? (

Preferences

Theme

Select or customize your interface color scheme.

{userTheme?.theme === "custom" && }
) : (
)}
); }); export default ProfilePreferencesPage;