import { useEffect, useState, ReactElement } 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 { ProfileSettingsLayout } from "layouts/settings-layout"; // components import { CustomThemeSelector, ThemeSwitch } from "components/core"; // ui import { Spinner } from "@plane/ui"; // constants import { I_THEME_OPTION, THEME_OPTIONS } from "constants/themes"; // type import { NextPageWithLayout } from "types/app"; const ProfilePreferencesPage: NextPageWithLayout = observer(() => { const { user: { currentUser, updateCurrentUserTheme }, } = useMobxStore(); // states const [currentTheme, setCurrentTheme] = useState(null); // computed const userTheme = 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); updateCurrentUserTheme(themeOption.value).catch(() => { setToastAlert({ title: "Failed to Update the theme", type: "error", }); }); }; return ( <> {currentUser ? (

Preferences

Theme

Select or customize your interface color scheme.

{userTheme?.theme === "custom" && }
) : (
)} ); }); ProfilePreferencesPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default ProfilePreferencesPage;