Add theme support to user settings and related components

app/src/components/settings/account/AccountSettings.tsx

@@ -89,6 +89,7 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
         email: user.email,
         currentPassword: '',
         newPassword: '',
+        theme: user.theme,
       };
       dispatch({
         type: SettingsActionType.INIT_SETTINGS,
@@ -107,6 +108,13 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
     });
   };
 
+  const handleThemeChange = (theme: string): void => {
+    dispatch({
+      type: SettingsActionType.UPDATE_LOCAL_SETTINGS,
+      payload: { theme } as UserProfileSettings,
+    });
+  };
+
   const handleSubmit = async (): Promise<void> => {
     const updates: UserProfileSettings = {};
     const needsPasswordConfirmation =
@@ -117,6 +125,14 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
       updates.displayName = state.localSettings.displayName || '';
     }
 
+    // Add theme if changed
+    if (
+      state.localSettings.theme &&
+      state.localSettings.theme !== state.initialSettings.theme
+    ) {
+      updates.theme = state.localSettings.theme;
+    }
+
     // Handle password change
     if (state.localSettings.newPassword) {
       if (!state.localSettings.currentPassword) {
@@ -216,6 +232,7 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
                 <ProfileSettings
                   settings={state.localSettings}
                   onInputChange={handleInputChange}
+                  onThemeChange={handleThemeChange}
                 />
               </Accordion.Panel>
             </Accordion.Item>