fix: resolved theme updation workflow in store-wrapper and workspace preferences (#4931)

web/app/profile/appearance/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
-// ui
+import { IUserTheme } from "@plane/types";
 import { setPromiseToast } from "@plane/ui";
 // components
 import { LogoSpinner } from "@/components/common";
@@ -11,6 +11,8 @@ import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core";
 import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 // constants
 import { I_THEME_OPTION, THEME_OPTIONS } from "@/constants/themes";
+// helpers
+import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
 // hooks
 import { useUserProfile } from "@/hooks/store";
 
@@ -31,9 +33,9 @@ const ProfileAppearancePage = observer(() => {
   }, [userProfile?.theme?.theme]);
 
   const handleThemeChange = (themeOption: I_THEME_OPTION) => {
-    setTheme(themeOption.value);
+    applyThemeChange({ theme: themeOption.value });
-    const updateCurrentUserThemePromise = updateUserTheme({ theme: themeOption.value });
 
+    const updateCurrentUserThemePromise = updateUserTheme({ theme: themeOption.value });
     setPromiseToast(updateCurrentUserThemePromise, {
       loading: "Updating theme...",
       success: {
@@ -47,6 +49,19 @@ const ProfileAppearancePage = observer(() => {
     });
   };
 
+  const applyThemeChange = (theme: Partial<IUserTheme>) => {
+    setTheme(theme?.theme || "system");
+
+    const customThemeElement = window.document?.querySelector<HTMLElement>("[data-theme='custom']");
+    if (theme?.theme === "custom" && theme?.palette && customThemeElement) {
+      applyTheme(
+        theme?.palette !== ",,,," ? theme?.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+        false,
+        customThemeElement
+      );
+    } else unsetCustomCssVariables();
+  };
+
   return (
     <>
       <PageHead title="Profile - Appearance" />
@@ -62,7 +77,7 @@ const ProfileAppearancePage = observer(() => {
               <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
             </div>
           </div>
-          {userProfile?.theme?.theme === "custom" && <CustomThemeSelector />}
+          {userProfile?.theme?.theme === "custom" && <CustomThemeSelector applyThemeChange={applyThemeChange} />}
         </ProfileSettingContentWrapper>
       ) : (
         <div className="grid h-full w-full place-items-center px-4 sm:px-0">

web/core/components/core/theme/custom-theme-selector.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useTheme } from "next-themes";
 import { Controller, useForm } from "react-hook-form";
 // types
 import { IUserTheme } from "@plane/types";
@@ -25,8 +24,12 @@ const inputRules = {
   },
 };
 
-export const CustomThemeSelector: React.FC = observer(() => {
+type TCustomThemeSelector = {
-  const { setTheme } = useTheme();
+  applyThemeChange: (theme: Partial<IUserTheme>) => void;
+};
+
+export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((props) => {
+  const { applyThemeChange } = props;
   // hooks
   const { data: userProfile, updateUserTheme } = useUserProfile();
 
@@ -59,7 +62,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
       palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`,
       theme: "custom",
     };
-    setTheme("custom");
+    applyThemeChange(payload);
 
     const updateCurrentUserThemePromise = updateUserTheme(payload);
     setPromiseToast(updateCurrentUserThemePromise, {

web/core/lib/wrappers/store-wrapper.tsx

@@ -14,7 +14,7 @@ type TStoreWrapper = {
 const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
   const { children } = props;
   // theme
-  const { resolvedTheme, setTheme } = useTheme();
+  const { setTheme } = useTheme();
   // router
   const params = useParams();
   // store hooks
@@ -38,19 +38,21 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
    * Setting up the theme of the user by fetching it from local storage
    */
   useEffect(() => {
-    setTheme(userProfile?.theme?.theme || resolvedTheme || "system");
     if (!userProfile?.theme?.theme) return;
 
-    if (userProfile?.theme?.theme === "custom" && userProfile?.theme?.palette) {
+    const currentTheme = userProfile?.theme?.theme || "system";
+    const currentThemePalette = userProfile?.theme?.palette;
+    if (currentTheme) {
+      setTheme(currentTheme);
+      if (currentTheme === "custom" && currentThemePalette && dom) {
         applyTheme(
-        userProfile?.theme?.palette !== ",,,,"
+          currentThemePalette !== ",,,," ? currentThemePalette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-          ? userProfile?.theme?.palette
-          : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
           false,
           dom
         );
       } else unsetCustomCssVariables();
-  }, [userProfile, userProfile?.theme, userProfile?.theme?.palette, setTheme, dom, resolvedTheme]);
+    }
+  }, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme, dom]);
 
   useEffect(() => {
     if (dom) return;