Add custom dark mode handler support (#445)

* Add custom dark mode handler support

* Fix lint

2 files changed, 56 insertions, 3 deletions

diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 1d24326c5..4fac21c55 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -19,6 +19,8 @@ class RecipeWebview {
 
   loopFunc = () => null;
 
+  darkModeHandler = false;
+
   /**
    * Initialize the loop
    *
@@ -80,6 +82,15 @@ class RecipeWebview {
     });
   }
 
+  /**
+   * Set a custom handler for turning on and off dark mode
+   *
+   * @param {function} handler
+   */
+  handleDarkMode(handler) {
+    this.darkModeHandler = handler;
+  }
+
   onNotify(fn) {
     if (typeof fn === 'function') {
       window.Notification.prototype.onNotify = fn;
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 79392e20e..bad5a93b2 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -53,6 +53,10 @@ class RecipeController {
 
   universalDarkModeInjected = false;
 
+  recipe = null;
+
+  hasUpdatedBeforeRecipeLoaded = false;
+
   constructor() {
     this.initialize();
   }
@@ -93,11 +97,15 @@ class RecipeController {
     // Delete module from cache
     delete require.cache[require.resolve(modulePath)];
     try {
+      this.recipe = new RecipeWebview();
       // eslint-disable-next-line
-      require(modulePath)(new RecipeWebview(), {...config, recipe,});
+      require(modulePath)(this.recipe, {...config, recipe,});
       debug('Initialize Recipe', config, recipe);
 
       this.settings.service = Object.assign(config, { recipe });
+
+      // Make sure to update the WebView, otherwise the custom darkmode handler may not be used
+      this.update();
     } catch (err) {
       console.error('Recipe initialization failed', err);
     }
@@ -166,12 +174,25 @@ class RecipeController {
       }
     }
 
+    if (!this.recipe) {
+      this.hasUpdatedBeforeRecipeLoaded = true;
+    }
+
     console.log(
       'Darkmode enabled?',
       this.settings.service.isDarkModeEnabled,
       'Dark theme active?',
       this.settings.app.isDarkThemeActive,
     );
+
+    const handlerConfig = {
+      removeDarkModeStyle,
+      disableDarkMode,
+      enableDarkMode,
+      injectDarkModeStyle: () => injectDarkModeStyle(this.settings.service.recipe.path),
+      isDarkModeStyleInjected,
+    };
+
     if (this.settings.service.isDarkModeEnabled && this.settings.app.isDarkThemeActive !== false) {
       debug('Enable dark mode');
 
@@ -181,7 +202,19 @@ class RecipeController {
 
       console.log('darkmode.css exists? ', darkModeExists ? 'Yes' : 'No');
 
-      if (darkModeExists) {
+      // Check if recipe has a custom dark mode handler
+      if (this.recipe && this.recipe.darkModeHandler) {
+        console.log('Using custom dark mode handler');
+
+        // Remove other dark mode styles if they were already loaded
+        if (this.hasUpdatedBeforeRecipeLoaded) {
+          this.hasUpdatedBeforeRecipeLoaded = false;
+          removeDarkModeStyle();
+          disableDarkMode();
+        }
+
+        this.recipe.darkModeHandler(true, handlerConfig);
+      } else if (darkModeExists) {
         console.log('Injecting darkmode.css');
         injectDarkModeStyle(this.settings.service.recipe.path);
 
@@ -201,7 +234,16 @@ class RecipeController {
       debug('Remove dark mode');
       console.log('DarkMode disabled - removing remaining styles');
 
-      if (isDarkModeStyleInjected()) {
+      if (this.recipe && this.recipe.darkModeHandler) {
+        // Remove other dark mode styles if they were already loaded
+        if (this.hasUpdatedBeforeRecipeLoaded) {
+          this.hasUpdatedBeforeRecipeLoaded = false;
+          removeDarkModeStyle();
+          disableDarkMode();
+        }
+
+        this.recipe.darkModeHandler(false, handlerConfig);
+      } else if (isDarkModeStyleInjected()) {
         console.log('Removing injected darkmode.css');
         removeDarkModeStyle();
       } else {