2 files changed, 30 insertions, 3 deletions

diff --git a/recipes/google-calendar/package.json b/recipes/google-calendar/package.json
index 79e94fe..a7dc23a 100644
--- a/recipes/google-calendar/package.json
+++ b/recipes/google-calendar/package.json
@@ -1,7 +1,7 @@
 {
   "id": "google-calendar",
   "name": "Google Calendar",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "license": "MIT",
   "aliases": [
     "google-calendar",
diff --git a/recipes/google-calendar/webview.js b/recipes/google-calendar/webview.js
index 3921dea..804527d 100644
--- a/recipes/google-calendar/webview.js
+++ b/recipes/google-calendar/webview.js
@@ -13,6 +13,33 @@ module.exports = Ferdium => {
     location.href =
       'https://accounts.google.com/AccountChooser?continue=https://calendar.google.com/u/0/';
   }
-  Ferdium.injectCSS(_path.default.join(__dirname, 'calendar.css'));
-  Ferdium.injectJSUnsafe(_path.default.join(__dirname, 'webview-unsafe.js'));
+
+  Ferdium.injectCSS(_path.default.join(__dirname, 'service.css'));
+  Ferdium.injectCSS(
+    'https://cdn.statically.io/gh/ferdium/ferdium-recipes/main/recipes/google-calendar/calendar.css',
+  );
+  Ferdium.injectJSUnsafe(
+    'https://cdn.statically.io/gh/ferdium/ferdium-recipes/main/recipes/google-calendar/webview-unsave.js',
+  );
+
+  Ferdium.handleDarkMode(isEnabled => {
+    const cssId = 'cssDarkModeWorkaround';
+
+    if (isEnabled) {
+      // Workaround for loading darkmode.css
+      if (!document.querySelector(`#${cssId}`)) {
+        const head = document.querySelectorAll('head')[0];
+        const link = document.createElement('link');
+        link.id = cssId;
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href =
+          'https://cdn.statically.io/gh/ferdium/ferdium-recipes/main/recipes/google-calendar/darkmode.css';
+        link.media = 'all';
+        head.append(link);
+      }
+    } else {
+      document.querySelector(`#${cssId}`)?.remove();
+    }
+  });
 };