Merge branch 'release/5.2.0-beta.4' into feature/new-pricing

1 files changed, 27 insertions, 3 deletions

diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index a95a8e1e0..9680c5bcc 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -1,4 +1,9 @@
-import { action, observable, computed } from 'mobx';
+import {
+  action,
+  observable,
+  computed,
+  reaction,
+} from 'mobx';
 import { theme } from '@meetfranz/theme';
 
 import Store from './lib/Store';
@@ -15,10 +20,18 @@ export default class UIStore extends Store {
     this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this));
   }
 
+  setup() {
+    reaction(
+      () => this.isDarkThemeActive,
+      () => this._setupThemeInDOM(),
+      { fireImmediately: true },
+    );
+  }
+
   @computed get showMessageBadgesEvenWhenMuted() {
     const settings = this.stores.settings.all;
 
-    return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted;
+    return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.app.isAppMuted;
   }
 
   @computed get isDarkThemeActive() {
@@ -26,7 +39,7 @@ export default class UIStore extends Store {
   }
 
   @computed get theme() {
-    if (this.isDarkThemeActive) return theme('dark');
+    if (this.isDarkThemeActive || this.stores.settings.app.darkMode) return theme('dark');
     return theme('default');
   }
 
@@ -47,4 +60,15 @@ export default class UIStore extends Store {
     }
     this.showServicesUpdatedInfoBar = visibility;
   }
+
+  // Reactions
+  _setupThemeInDOM() {
+    const body = document.querySelector('body');
+
+    if (!this.isDarkThemeActive) {
+      body.classList.remove('theme__dark');
+    } else {
+      body.classList.add('theme__dark');
+    }
+  }
 }