feat: Use DarkReader for dark mode emails

.gitignore

@@ -1,6 +1,5 @@
 *~
 .valencia
-/Makefile
 /.stamp
 build/
 _build/

BUILDING.md

@@ -120,6 +120,21 @@ And for Ubuntu Messaging Menu integration:
 sudo apt-get install libmessaging-menu-dev
 ```
 
+Updating DarkReader plugin
+--------------------------
+
+We're using [DarkReader API](https://github.com/darkreader/darkreader) for dark mode.
+
+To update it, download latest version from CDN and save as ui/darkreader.js
+
+ - [unpkg](https://unpkg.com/darkreader/)
+ - [jsDelivr](https://www.jsdelivr.com/package/npm/darkreader)
+
+
+```sh
+curl https://cdn.jsdelivr.net/npm/darkreader/darkreader.js --output ui/darkreader.js
+```
+
 ---
 Copyright © 2016 Software Freedom Conservancy Inc.
 Copyright © 2018-2020 Michael Gratton <mike@vee.net>

desktop/org.gnome.Geary.gschema.xml

@@ -41,7 +41,6 @@
 
     <key name="unset-html-colors" type="b">
       <default>false</default>
-      <summary>Unset colors provided in HTML emails</summary>
       <summary>Override colors in HTML emails</summary>
       <description>Overrides the original colors in HTML messages to integrate better with the app theme.</description>
     </key>

src/client/components/components-web-view.vala

@@ -126,6 +126,7 @@ public abstract class Components.WebView : WebKit.WebView, Geary.BaseInterface {
      */
     public static void load_resources(GLib.File user_dir)
         throws GLib.Error {
+        WebView.scripts.append(load_app_script("darkreader.js"));
         WebView.scripts.append(load_app_script("components-web-view.js"));
         WebView.styles.append(load_app_stylesheet("components-web-view.css"));
 

ui/components-web-view.css

@@ -25,6 +25,12 @@ body {
   --hover-button-background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
   --hover-button-box-shadow-color: rgba(255, 255, 255, 1);
 
+  /*
+   * DarkReader specific color overrides
+   */
+  /* Gitlab message main color is too dark, override with brighter color */
+  --darkreader-text-3a383f: #eae8ef;
+
   /* Adjust default controls and system colors for light and dark mode.
   See https://www.w3.org/TR/css-color-adjust-1/#color-scheme-effect */
   color-scheme: light dark;

ui/components-web-view.js

@@ -72,8 +72,12 @@ PageState.prototype = {
         this.updatePreferredHeight();
         this._contentLoaded();
         if (window.UNSET_HTML_COLORS) {
-          document.body.setAttribute("data-geary-theme", "dark")
-          unsetHTMLColors(document);
+          document.body.setAttribute("data-geary-theme", "dark");
+          DarkReader.auto({
+            // Defaults is too dark. These colors are better fitting into Adwaita style.
+            darkSchemeBackgroundColor: "#2a2d30",
+            darkSchemeTextColor: "#eaeaea",
+          });
         }
     },
     loadRemoteResources: function() {
@@ -186,61 +190,3 @@ let MessageSender = function(name) {
         _GearyWebExtension.send(name, Array.from(arguments));
     };
 };
-
-
-/**
- * Unsets inline and stylesheet colors from the given document.
- * @param {Document} doc The HTML document to process.
- * @returns {void}
- */
-function unsetHTMLColors(doc) {
-  // Slightly modified copy from Evolution
-  // https://gitlab.gnome.org/GNOME/evolution/-/blob/94510bed94e8de641a8d54f2adaec6f02a8972de/data/webkit/e-web-view.js#L1169
-
-  Array.from(doc.styleSheets).forEach(sheet => {
-
-    Array.from(sheet.cssRules).forEach(rule => {
-
-      if (!rule.style || !rule.selectorText )
-        return;
-
-      if (rule.style.color)
-        rule.style.removeProperty("color");
-
-      if (rule.style.backgroundColor)
-        rule.style.removeProperty("background-color");
-    })
-  })
-
-  doc.querySelectorAll("[style],[color],[bgcolor]").forEach(elem => {
-
-    if (["HTML", "IFRAME", "INPUT", "BUTTON", "IMG"].includes(elem.tagName)) {
-      return;
-    }
-
-    if (elem.style) {
-      if (elem.style.color)
-        elem.style.removeProperty("color");
-
-      if (elem.style.backgroundColor)
-        elem.style.removeProperty("background-color");
-
-      if (elem.style.backgroundImage)
-        elem.style.removeProperty("background-image");
-
-      if (!elem.style.length)
-        elem.removeAttribute("style");
-    }
-
-    elem.removeAttribute("color");
-    elem.removeAttribute("bgcolor");
-  });
-
-  doc.querySelectorAll("body").forEach(elem => {
-    elem.removeAttribute("bgcolor");
-    elem.removeAttribute("text");
-    elem.removeAttribute("link");
-    elem.removeAttribute("alink");
-    elem.removeAttribute("vlink");
-  });
-}

ui/org.gnome.Geary.gresource.xml

@@ -8,6 +8,7 @@
     <file compressed="true" preprocess="xml-stripblanks">accounts_editor_servers_pane.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">application-main-window.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">certificate_warning_dialog.glade</file>
+    <file compressed="true">darkreader.js</file>
     <file compressed="true">components-web-view.js</file>
     <file compressed="true">components-web-view.css</file>
     <file compressed="true" preprocess="xml-stripblanks">components-attachment-pane.ui</file>