1 files changed, 45 insertions, 3 deletions

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 {