feat(App): Load selected theme on app start

src/stores/ServicesStore.js

@@ -1,5 +1,5 @@
 import { action, reaction, computed, observable } from 'mobx';
-import { debounce, remove } from 'lodash';
+import { remove } from 'lodash';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -587,10 +587,14 @@ export default class ServicesStore extends Store {
 
   _initializeServiceRecipeInWebview(serviceId) {
     const service = this.one(serviceId);
-
-    if (service.webview) {
-      service.webview.send('initializeRecipe', service);
-    }
+    this.actions.settings.appSettings()
+      .then(({ theme }) => {
+        if (service.webview) {
+          service.startTheme = theme;
+          service.webview.send('initializeRecipe', service);
+        }
+      })
+      .catch(console.error);
   }
 
   _initRecipePolling(serviceId) {

src/stores/SettingsStore.js

@@ -17,6 +17,7 @@ export default class SettingsStore extends Store {
     super(...args);
 
     // Register action handlers
+    this.actions.settings.appSettings = () => this._getAppSettings();
     this.actions.settings.update.listen(this._update.bind(this));
     this.actions.settings.remove.listen(this._remove.bind(this));
     this.actions.settings.setBackground.listen(this._setBackground.bind(this));
@@ -39,6 +40,10 @@ export default class SettingsStore extends Store {
     });
   }
 
+  @action async _getAppSettings() {
+    return this.appSettingsRequest.execute().result;
+  }
+
   @action async _update({ type, data }) {
     const appSettings = this.all;
     if (type !== 'app') {

src/webview/lib/RecipeWebview.js

@@ -3,18 +3,22 @@ const { ipcRenderer } = require('electron');
 const fs = require('fs-extra');
 
 class RecipeWebview {
-  constructor() {
+  constructor(options = {}) {
     this.countCache = {
       direct: 0,
       indirect: 0,
     };
 
+    if (options.startTheme) {
+      this.changeTheme(options.startTheme);
+    }
+
     ipcRenderer.on('poll', () => {
       this.loopFunc();
     });
 
-    ipcRenderer.on('change-theme', (eventEmitter, { newTheme }) => {
-      this.changeTheme(newTheme);
+    ipcRenderer.on('change-theme', (ee, { themeName }) => {
+      this.changeTheme(themeName);
     });
   }
 

src/webview/plugin.js

@@ -16,7 +16,7 @@ ipcRenderer.on('initializeRecipe', (e, data) => {
   delete require.cache[require.resolve(modulePath)];
   try {
     // eslint-disable-next-line
-    require(modulePath)(new RecipeWebview(), data);
+    require(modulePath)(new RecipeWebview(data), data);
     debug('Initialize Recipe');
   } catch (err) {
     debug('Recipe initialization failed', err);
@@ -37,34 +37,8 @@ ipcRenderer.on('settings-update', (e, data) => {
   debug('Settings update received', data);
 });
 
-// initSpellche
-
 document.addEventListener('DOMContentLoaded', () => {
-  const 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);
-    }
-  };
-
   ipcRenderer.sendToHost('hello');
-
-  ipcRenderer.on('change-theme', (ee, { themeName }) => {
-    console.log('plugin.js theme-changer', themeName);
-    changeTheme(themeName);
-  });
 }, false);
 
 // Patching window.open