Add latest changes from gitlab-org/gitlab@master

1 files changed, 20 insertions, 6 deletions

diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
index 184ee3810ac..07d8f3cc5f1 100644
--- a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
+++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
@@ -44,6 +44,8 @@ export default {
   data() {
     return {
       isSubmitEnabled: true,
+      darkModeOnCreate: null,
+      darkModeOnSubmit: null,
     };
   },
   computed: {
@@ -58,6 +60,7 @@ export default {
     this.formEl.addEventListener('ajax:beforeSend', this.handleLoading);
     this.formEl.addEventListener('ajax:success', this.handleSuccess);
     this.formEl.addEventListener('ajax:error', this.handleError);
+    this.darkModeOnCreate = this.darkModeSelected();
   },
   beforeDestroy() {
     this.formEl.removeEventListener('ajax:beforeSend', this.handleLoading);
@@ -65,16 +68,27 @@ export default {
     this.formEl.removeEventListener('ajax:error', this.handleError);
   },
   methods: {
+    darkModeSelected() {
+      const theme = this.getSelectedTheme();
+      return theme ? theme.css_class === 'gl-dark' : null;
+    },
+    getSelectedTheme() {
+      const themeId = new FormData(this.formEl).get('user[theme_id]');
+      return this.applicationThemes[themeId] ?? null;
+    },
     handleLoading() {
       this.isSubmitEnabled = false;
+      this.darkModeOnSubmit = this.darkModeSelected();
     },
     handleSuccess(customEvent) {
-      const formData = new FormData(this.formEl);
-      updateClasses(
-        this.bodyClasses,
-        this.applicationThemes[formData.get('user[theme_id]')].css_class,
-        this.selectedLayout,
-      );
+      // Reload the page if the theme has changed from light to dark mode or vice versa
+      // to correctly load all required styles.
+      const modeChanged = this.darkModeOnCreate ? !this.darkModeOnSubmit : this.darkModeOnSubmit;
+      if (modeChanged) {
+        window.location.reload();
+        return;
+      }
+      updateClasses(this.bodyClasses, this.getSelectedTheme().css_class, this.selectedLayout);
       const { message = this.$options.i18n.defaultSuccess, type = FLASH_TYPES.NOTICE } =
         customEvent?.detail?.[0] || {};
       createFlash({ message, type });