Merge branch 'develop' into feature/features-api

2 files changed, 62 insertions, 4 deletions

diff --git a/src/webview/darkmode.js b/src/webview/darkmode.js
new file mode 100644
index 000000000..9830ef33c
--- /dev/null
+++ b/src/webview/darkmode.js
@@ -0,0 +1,28 @@
+import path from 'path';
+import fs from 'fs-extra';
+
+const ID = 'franz-theme-dark-mode';
+
+export function injectDarkModeStyle(recipePath) {
+  const darkModeStyle = path.join(recipePath, 'darkmode.css');
+  if (fs.pathExistsSync(darkModeStyle)) {
+    const data = fs.readFileSync(darkModeStyle);
+    const styles = document.createElement('style');
+    styles.id = ID;
+    styles.innerHTML = data.toString();
+
+    document.querySelector('head').appendChild(styles);
+  }
+}
+
+export function removeDarkModeStyle() {
+  const style = document.querySelector(`#${ID}`);
+
+  if (style) {
+    style.remove();
+  }
+}
+
+export function isDarkModeStyleInjected() {
+  return !!document.querySelector(`#${ID}`);
+}
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
index d9e021e6d..e6fdc4efd 100644
--- a/src/webview/plugin.js
+++ b/src/webview/plugin.js
@@ -6,8 +6,14 @@ import { isDevMode } from '../environment';
 import RecipeWebview from './lib/RecipeWebview';
 
 import Spellchecker from './spellchecker';
+import { injectDarkModeStyle, isDarkModeStyleInjected, removeDarkModeStyle } from './darkmode';
 import './notifications';
 
+const debug = require('debug')('Franz:Plugin');
+
+window.franzSettings = {};
+let serviceData;
+
 ipcRenderer.on('initializeRecipe', (e, data) => {
   const modulePath = path.join(data.recipe.path, 'webview.js');
   // Delete module from cache
@@ -15,8 +21,16 @@ ipcRenderer.on('initializeRecipe', (e, data) => {
   try {
     // eslint-disable-next-line
     require(modulePath)(new RecipeWebview(), data);
+    debug('Initialize Recipe', data);
+
+    serviceData = data;
+
+    if (data.isDarkModeEnabled) {
+      injectDarkModeStyle(data.recipe.path);
+      debug('Add dark theme styles');
+    }
   } catch (err) {
-    console.error(err);
+    debug('Recipe initialization failed', err);
   }
 });
 
@@ -30,11 +44,27 @@ new ContextMenuListener((info) => { // eslint-disable-line
 });
 
 ipcRenderer.on('settings-update', (e, data) => {
-  console.log('settings-update', data);
+  debug('Settings update received', data);
+
   spellchecker.toggleSpellchecker(data.enableSpellchecking);
+  window.franzSettings = data;
+});
+
+ipcRenderer.on('service-settings-update', (e, data) => {
+  debug('Service settings update received', data);
+
+  if (data.isDarkModeEnabled && !isDarkModeStyleInjected()) {
+    injectDarkModeStyle(serviceData.recipe.path);
+
+    debug('Enable service dark mode');
+  } else if (!data.isDarkModeEnabled && isDarkModeStyleInjected()) {
+    removeDarkModeStyle();
+
+    debug('Disable service dark mode');
+  }
 });
 
-// initSpellche
+// initSpellchecker
 
 document.addEventListener('DOMContentLoaded', () => {
   ipcRenderer.sendToHost('hello');
@@ -44,7 +74,7 @@ document.addEventListener('DOMContentLoaded', () => {
 const originalWindowOpen = window.open;
 
 window.open = (url, frameName, features) => {
-  // We need to differentiate if the link should be opened in a popup or in the systems default browser 
+  // We need to differentiate if the link should be opened in a popup or in the systems default browser
   if (!frameName && !features) {
     return ipcRenderer.sendToHost('new-window', url);
   }