import { useEffect, useState, ReactElement } from "react"; import { observer } from "mobx-react-lite"; import { useTheme } from "next-themes"; // ui import { Spinner, setPromiseToast } from "@plane/ui"; // components import { CustomThemeSelector, ThemeSwitch, PageHead } from "components/core"; // constants import { I_THEME_OPTION, THEME_OPTIONS } from "constants/themes"; // hooks import { useUser } from "hooks/store"; // layouts import { ProfilePreferenceSettingsLayout } from "layouts/settings-layout/profile/preferences"; // type import { NextPageWithLayout } from "lib/types"; const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => { // states const [currentTheme, setCurrentTheme] = useState(null); // store hooks const { currentUser, updateCurrentUserTheme } = useUser(); // computed const userTheme = currentUser?.theme; // hooks const { setTheme } = useTheme(); 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); const updateCurrentUserThemePromise = updateCurrentUserTheme(themeOption.value); setPromiseToast(updateCurrentUserThemePromise, { loading: "Updating theme...", success: { title: "Success!", message: () => "Theme updated successfully!", }, error: { title: "Error!", message: () => "Failed to Update the theme", }, }); }; return ( <> {currentUser ? (

Preferences

Theme

Select or customize your interface color scheme.

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