Add darkreader for universal darkmode

4 files changed, 47 insertions, 6 deletions

diff --git a/package-lock.json b/package-lock.json
index dfa1b1792..b7cc09b98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2180,7 +2180,8 @@
       "dependencies": {
         "@mdi/js": {
           "version": "3.9.97",
-          "resolved": false
+          "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.9.97.tgz",
+          "integrity": "sha512-JzX6rDlUcNZHaoUg9sAzdg5Js287tvgRbNmMIyKoJK2ZCP9JupeWTYlpbX4oNJ9Zg9v8YH76WuWLALKOospQgw=="
         },
         "@meetfranz/theme": {
           "version": "1.0.14",
@@ -2209,7 +2210,8 @@
       "dependencies": {
         "@mdi/js": {
           "version": "3.9.97",
-          "resolved": false
+          "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.9.97.tgz",
+          "integrity": "sha512-JzX6rDlUcNZHaoUg9sAzdg5Js287tvgRbNmMIyKoJK2ZCP9JupeWTYlpbX4oNJ9Zg9v8YH76WuWLALKOospQgw=="
         },
         "@meetfranz/theme": {
           "version": "1.0.14",
@@ -5829,6 +5831,14 @@
         "number-is-nan": "^1.0.0"
       }
     },
+    "darkreader": {
+      "version": "4.7.15",
+      "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.7.15.tgz",
+      "integrity": "sha512-i9OzIGJqmbghZ42MI0pHD9hIlEu5LDfOP5TWAg+OyZoO0XsW0D2HoFdCebS4OLRrEr3/TflzDYvUMVnosWR4uA==",
+      "requires": {
+        "malevic": "0.16.3"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -13920,6 +13930,11 @@
         "tmpl": "1.0.x"
       }
     },
+    "malevic": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/malevic/-/malevic-0.16.3.tgz",
+      "integrity": "sha512-/ekZOKILDitU6igF0zxkuTNLQgNTTs+NafyQ19RXwT+VKN9K3qTngQ+TdqcaZJbhSzRqVIXBw6iso6WV56QlhQ=="
+    },
     "map-age-cleaner": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
diff --git a/package.json b/package.json
index 5f56ef705..39ad362b9 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "auto-launch": "5.0.5",
     "classnames": "2.2.6",
     "cld3-asm": "1.0.1",
+    "darkreader": "4.7.15",
     "du": "^0.1.0",
     "electron-dl": "1.12.0",
     "electron-fetch": "1.3.0",
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 45350d8f5..3173004d4 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -96,6 +96,11 @@ export default class ServicesStore extends Store {
       () => this.stores.settings.app.spellcheckerLanguage,
       () => this._shareSettingsWithServiceProcess(),
     );
+
+    reaction(
+      () => this.stores.settings.app.darkMode,
+      () => this._shareSettingsWithServiceProcess(),
+    );
   }
 
   @computed get all() {
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index e00566283..e97013b3c 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,8 +1,13 @@
 import { ipcRenderer } from 'electron';
 import path from 'path';
 import { autorun, computed, observable } from 'mobx';
+import fs from 'fs-extra';
 import { loadModule } from 'cld3-asm';
 import { debounce } from 'lodash';
+import {
+  enable as enableDarkMode,
+  disable as disableDarkMode,
+} from 'darkreader';
 
 import RecipeWebview from './lib/RecipeWebview';
 
@@ -109,12 +114,27 @@ class RecipeController {
       }
     }
 
-    if (this.settings.service.isDarkModeEnabled) {
+    if (this.settings.service.isDarkModeEnabled || this.settings.app.darkMode) {
       debug('Enable dark mode');
-      injectDarkModeStyle(this.settings.service.recipe.path);
-    } else if (isDarkModeStyleInjected()) {
+
+      // Check if recipe has a darkmode.css
+      const darkModeStyle = path.join(this.settings.service.recipe.path, 'darkmode.css');
+      const darkModeExists = fs.pathExistsSync(darkModeStyle);
+
+      if (darkModeExists) {
+        injectDarkModeStyle(this.settings.service.recipe.path);
+      } else {
+        // Use darkreader instead
+        enableDarkMode();
+      }
+    } else {
       debug('Remove dark mode');
-      removeDarkModeStyle();
+
+      if (isDarkModeStyleInjected()) {
+        removeDarkModeStyle();
+      } else {
+        disableDarkMode();
+      }
     }
   }