Add custom CSS for darkmode to fix WhatsApp and Threema QR codes

2 files changed, 27 insertions, 2 deletions

diff --git a/src/webview/darkmode/custom.js b/src/webview/darkmode/custom.js
new file mode 100644
index 000000000..4b2b89fb2
--- /dev/null
+++ b/src/webview/darkmode/custom.js
@@ -0,0 +1,22 @@
+// CSS for pages that need custom styles to work correctly in darkmode
+export default { 
+  'web.whatsapp.com': `
+    div.landing-window > div.landing-main {
+      background-color: #FFFFFF !important;
+    }
+    div.landing-window > div.landing-main * {
+      color: #212121 !important;
+    }
+  `,
+  'web.threema.ch': `
+    .scan {
+      background-color: #FFF;
+    }
+    .scan * {
+      color: #212121;
+    }
+    .scan input.md-input {
+      color: #212121;
+    }
+  `
+};
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 3f2338b68..854cbce58 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -10,6 +10,7 @@ import {
 } from 'darkreader';
 
 import ignoreList from './darkmode/ignore';
+import customDarkModeCss from './darkmode/custom';
 
 import RecipeWebview from './lib/RecipeWebview';
 
@@ -116,7 +117,7 @@ class RecipeController {
         this.cldIdentifier.destroy();
       }
     }
-
+    
     if (this.settings.service.isDarkModeEnabled || this.settings.app.darkMode) {
       debug('Enable dark mode');
 
@@ -128,7 +129,9 @@ class RecipeController {
         injectDarkModeStyle(this.settings.service.recipe.path);
       } else if (!ignoreList.includes(window.location.host)) {
         // Use darkreader instead
-        enableDarkMode();
+        enableDarkMode({}, {
+          css: customDarkModeCss[window.location.host] || ''
+        });
       }
     } else {
       debug('Remove dark mode');