feat(App): Change recipe theme when changing Franz theme

resolves #2

src/actions/service.js

@@ -85,4 +85,5 @@ export default {
     serviceId: PropTypes.string.isRequired,
   },
   openDevToolsForActiveService: {},
+  changeServicesTheme: {},
 };

src/stores/ServicesStore.js

@@ -52,6 +52,7 @@ export default class ServicesStore extends Store {
     this.actions.service.toggleAudio.listen(this._toggleAudio.bind(this));
     this.actions.service.openDevTools.listen(this._openDevTools.bind(this));
     this.actions.service.openDevToolsForActiveService.listen(this._openDevToolsForActiveService.bind(this));
+    this.actions.service.changeServicesTheme.listen(this._changeServicesTheme.bind(this));
 
     this.registerReactions([
       this._focusServiceReaction.bind(this),
@@ -477,6 +478,15 @@ export default class ServicesStore extends Store {
     });
   }
 
+  @action _changeServicesTheme(newTheme) {
+    const services = this.all;
+    services.forEach((service) => {
+      if (service.webview) {
+        service.webview.send('change-theme', newTheme);
+      }
+    });
+  }
+
   @action _openDevTools({ serviceId }) {
     const service = this.one(serviceId);
 

src/stores/UIStore.js

@@ -51,6 +51,7 @@ export default class UIStore extends Store {
           document.body.classList.remove(c);
         }
       });
+      this.actions.service.changeServicesTheme(themeName);
       if (name === 'theme-regular') {
         return;
       }

src/webview/lib/RecipeWebview.js

@@ -12,8 +12,31 @@ class RecipeWebview {
     ipcRenderer.on('poll', () => {
       this.loopFunc();
     });
+
+    ipcRenderer.on('change-theme', (eventEmitter, newTheme) => {
+      this.changeTheme(newTheme);
+    });
   }
 
+  changeTheme = (themeName) => {
+    const currentClassList = document.body.classList;
+    if (themeName && !currentClassList.contains(themeName)) {
+      let name = themeName;
+      if (!themeName.startsWith('theme-')) {
+        name = `theme-${themeName}`;
+      }
+      [...currentClassList].forEach((c) => {
+        if (c && c.startsWith('theme-')) {
+          document.body.classList.remove(c);
+        }
+      });
+      if (name === 'theme-regular') {
+        return;
+      }
+      document.body.classList.add(name);
+    }
+  };
+
   loopFunc = () => null;
 
   /**