From 4a79147402952cbbe777fd7807f52ea8b014b3f9 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Wed, 26 Jul 2023 12:48:14 -0400
Subject: [PATCH] Fix re-selection of custom theme (#7470)

---
 .../settings/display_theme/custom_theme.tsx    |  3 ++-
 .../settings/display_theme/display_theme.tsx   | 18 ++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/screens/settings/display_theme/custom_theme.tsx b/app/screens/settings/display_theme/custom_theme.tsx
index 28368d933..9a65ba7ff 100644
--- a/app/screens/settings/display_theme/custom_theme.tsx
+++ b/app/screens/settings/display_theme/custom_theme.tsx
@@ -17,13 +17,14 @@ type CustomThemeProps = {
 const CustomTheme = ({setTheme, displayTheme}: CustomThemeProps) => {
     const intl = useIntl();
     const theme = useTheme();
+
     return (
         <>
             <SettingSeparator isGroupSeparator={true}/>
             <SettingOption
                 action={setTheme}
                 type='select'
-                value={theme.type}
+                value={'custom'}
                 label={intl.formatMessage({id: 'settings_display.custom_theme', defaultMessage: 'Custom Theme'})}
                 selected={theme.type?.toLowerCase() === displayTheme?.toLowerCase()}
                 radioItemProps={radioItemProps}
diff --git a/app/screens/settings/display_theme/display_theme.tsx b/app/screens/settings/display_theme/display_theme.tsx
index 7c3458231..19c544c3a 100644
--- a/app/screens/settings/display_theme/display_theme.tsx
+++ b/app/screens/settings/display_theme/display_theme.tsx
@@ -25,27 +25,29 @@ type DisplayThemeProps = {
 const DisplayTheme = ({allowedThemeKeys, componentId, currentTeamId, currentUserId}: DisplayThemeProps) => {
     const serverUrl = useServerUrl();
     const theme = useTheme();
-    const initialTheme = useMemo(() => theme.type, [/* dependency array should remain empty */]);
+    const initialTheme = useMemo(() => theme, [/* dependency array should remain empty */]);
 
     const close = () => popTopScreen(componentId);
 
     const setThemePreference = useCallback((newTheme?: string) => {
         const allowedTheme = allowedThemeKeys.find((tk) => tk === newTheme);
-        const differentTheme = initialTheme?.toLowerCase() !== newTheme?.toLowerCase();
+        const differentTheme = theme.type?.toLowerCase() !== newTheme?.toLowerCase();
 
-        if (!allowedTheme || !differentTheme) {
+        if (!differentTheme) {
             close();
             return;
         }
 
+        const themeJson = Preferences.THEMES[allowedTheme as ThemeKey] || initialTheme;
+
         const pref: PreferenceType = {
             category: Preferences.CATEGORIES.THEME,
             name: currentTeamId,
             user_id: currentUserId,
-            value: JSON.stringify(Preferences.THEMES[allowedTheme as ThemeKey]),
+            value: JSON.stringify(themeJson),
         };
         savePreference(serverUrl, [pref]);
-    }, [allowedThemeKeys, currentTeamId, initialTheme, serverUrl]);
+    }, [allowedThemeKeys, currentTeamId, theme.type, serverUrl]);
 
     useAndroidHardwareBackHandler(componentId, setThemePreference);
 
@@ -54,12 +56,12 @@ const DisplayTheme = ({allowedThemeKeys, componentId, currentTeamId, currentUser
             <ThemeTiles
                 allowedThemeKeys={allowedThemeKeys}
                 onThemeChange={setThemePreference}
-                selectedTheme={initialTheme}
+                selectedTheme={theme.type}
             />
-            {theme.type === 'custom' && (
+            {initialTheme.type === 'custom' && (
                 <CustomTheme
                     setTheme={setThemePreference}
-                    displayTheme={initialTheme}
+                    displayTheme={initialTheme.type}
                 />
             )}
         </SettingContainer>