[WEB-5772] chore: theme switcher and editor colors enhancements (#8436)

apps/web/ce/components/preferences/theme-switcher.tsx

@@ -6,6 +6,7 @@ import type { I_THEME_OPTION } from "@plane/constants";
 import { THEME_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { setPromiseToast } from "@plane/propel/toast";
+import { applyCustomTheme } from "@plane/utils";
 // components
 import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
 import { ThemeSwitch } from "@/components/core/theme/theme-switch";
@@ -34,26 +35,46 @@ export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
   }, [userProfile?.theme?.theme]);
 
   const handleThemeChange = useCallback(
-    (themeOption: I_THEME_OPTION) => {
+    async (themeOption: I_THEME_OPTION) => {
       try {
         setTheme(themeOption.value);
+
+        // If switching to custom theme and user has saved custom colors, apply them immediately
+        if (
+          themeOption.value === "custom" &&
+          userProfile?.theme?.primary &&
+          userProfile?.theme?.background &&
+          userProfile?.theme?.darkPalette !== undefined
+        ) {
+          applyCustomTheme(
+            userProfile.theme.primary,
+            userProfile.theme.background,
+            userProfile.theme.darkPalette ? "dark" : "light"
+          );
+        }
+
         const updatePromise = updateUserTheme({ theme: themeOption.value });
         setPromiseToast(updatePromise, {
           loading: "Updating theme...",
           success: {
-            title: "Success!",
-            message: () => "Theme updated successfully!",
+            title: "Theme updated",
+            message: () => "Reloading to apply changes...",
           },
           error: {
             title: "Error!",
-            message: () => "Failed to update the theme",
+            message: () => "Failed to update theme. Please try again.",
           },
         });
+        // Wait for the promise to resolve, then reload after showing toast
+        await updatePromise;
+        setTimeout(() => {
+          window.location.reload();
+        }, 1500);
       } catch (error) {
         console.error("Error updating theme:", error);
       }
     },
-    [updateUserTheme]
+    [setTheme, updateUserTheme, userProfile]
   );
 
   if (!userProfile) return null;
@@ -65,7 +86,12 @@ export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
         description={t(props.option.description)}
         control={
           <div>
-            <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
+            <ThemeSwitch
+              value={currentTheme}
+              onChange={(themeOption) => {
+                void handleThemeChange(themeOption);
+              }}
+            />
           </div>
         }
       />