fix(theme): apply theme without saving (#6695)

app/portainer/components/theme/theme-settings.controller.js

@@ -13,35 +13,27 @@ export default class ThemeSettingsController {
     this.setTheme = this.setTheme.bind(this);
   }
 
-  /** Theme Settings Panel */
-  async updateTheme() {
+  async setTheme(theme) {
     try {
+      if (theme === 'auto' || !theme) {
+        this.ThemeManager.autoTheme();
+      } else {
+        this.ThemeManager.setTheme(theme);
+      }
+      this.state.userTheme = theme;
       await this.UserService.updateUserTheme(this.state.userId, this.state.userTheme);
-      this.state.themeInProgress = false;
       this.Notifications.success('Success', 'User theme successfully updated');
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to update user theme');
     }
   }
 
-  setTheme(theme) {
-    if (theme === 'auto' || !theme) {
-      this.ThemeManager.autoTheme();
-    } else {
-      this.ThemeManager.setTheme(theme);
-    }
-    this.state.themeInProgress = true;
-    this.state.userTheme = theme;
-  }
-
   $onInit() {
     return this.$async(async () => {
       this.state = {
         userId: null,
         userTheme: '',
-        initTheme: '',
         defaultTheme: 'auto',
-        themeInProgress: false,
       };
 
       this.state.availableThemes = [
@@ -55,16 +47,9 @@ export default class ThemeSettingsController {
         this.state.userId = await this.Authentication.getUserDetails().ID;
         const data = await this.UserService.user(this.state.userId);
         this.state.userTheme = data.UserTheme || this.state.defaultTheme;
-        this.state.initTheme = this.state.userTheme;
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to get user details');
       }
     });
   }
-
-  $onDestroy() {
-    if (this.state.themeInProgress) {
-      this.ThemeManager.setTheme(this.state.initTheme);
-    }
-  }
 }

app/portainer/components/theme/theme-settings.html

@@ -12,7 +12,6 @@
     <form class="theme-panel">
       <!-- Theme Selector-->
       <box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
-      <button ng-click="$ctrl.updateTheme()" class="btn btn-primary btn-sm">Update theme</button>
       <!-- !Theme -->
     </form>
   </rd-widget-body>