Swap darkmode-js for darkreader

darkreader is more customizable, and doesn't do weird things to images. Being able to use CSS-native animations is also much simpler

package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
         "bulma": "^0.9.4",
-        "darkmode-js": "^1.5.7"
+        "darkreader": "^4.9.51"
       },
       "devDependencies": {
         "esbuild": "^0.14.43",
@@ -186,10 +186,14 @@
         "node": ">=4.8"
       }
     },
-    "node_modules/darkmode-js": {
-      "version": "1.5.7",
-      "resolved": "https://registry.npmjs.org/darkmode-js/-/darkmode-js-1.5.7.tgz",
-      "integrity": "sha512-gM1KhV/yy/84ZUpES9/oeOn0CVtuOi2HBd+Kccr4CJz+rFccQo2gUuPbjfyPXUx7t800Zf408G6kZb5rkTgjFA=="
+    "node_modules/darkreader": {
+      "version": "4.9.51",
+      "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
+      "integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/darkreader/donate"
+      }
     },
     "node_modules/define-properties": {
       "version": "1.1.4",
@@ -1716,10 +1720,10 @@
         "which": "^1.2.9"
       }
     },
-    "darkmode-js": {
-      "version": "1.5.7",
-      "resolved": "https://registry.npmjs.org/darkmode-js/-/darkmode-js-1.5.7.tgz",
-      "integrity": "sha512-gM1KhV/yy/84ZUpES9/oeOn0CVtuOi2HBd+Kccr4CJz+rFccQo2gUuPbjfyPXUx7t800Zf408G6kZb5rkTgjFA=="
+    "darkreader": {
+      "version": "4.9.51",
+      "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
+      "integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ=="
     },
     "define-properties": {
       "version": "1.1.4",

package.json

@@ -22,6 +22,6 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "bulma": "^0.9.4",
-    "darkmode-js": "^1.5.7"
+    "darkreader": "^4.9.51"
   }
 }

static/src/js/darkmode.js

@@ -1,25 +0,0 @@
-import Darkmode from "darkmode-js";
-
-const DARKMODE_OPTIONS = {
-  left: "32px",
-  right: "unset",
-  time: "0.7s",
-  saveInCookies: false,
-  label: "🌓",
-};
-
-window.addEventListener("load", () => {
-  const darkmode = new Darkmode(DARKMODE_OPTIONS);
-  darkmode.showWidget();
-  window.darkmodejs = darkmode;
-});
-
-// Also listen to native theme changes
-window
-  .matchMedia("(prefers-color-scheme: dark)")
-  .addEventListener("change", (e) => {
-    if (e.matches !== window.darkmodejs.isActivated()) {
-      // HACK: .toggle doesn't work quite right
-      window.darkmodejs.button.click();
-    }
-  });

static/src/js/darkreader.js

@@ -0,0 +1,10 @@
+import * as DarkReader from "darkreader";
+
+const DARK_READER_OPTIONS = {};
+
+const DARK_READER_FIXES = {
+  invert: [".wagtail-userbar-icon"],
+};
+
+// TODO: Add a UI toggle
+DarkReader.auto(DARK_READER_OPTIONS, DARK_READER_FIXES);

static/src/scss/base.scss

@@ -16,8 +16,3 @@ body {
   display: flex;
   flex-direction: column;
 }
-
-.darkmode-layer,
-.darkmode-toggle {
-  z-index: $navbar-z - 1;
-}

templates/base.html

@@ -41,7 +41,7 @@
     <script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script>
 
     {% block darkmode %}
-      <script async defer type="text/javascript" src="{% static 'js/darkmode.js' %}"></script>
+      <script type="text/javascript" src="{% static 'js/darkreader.js' %}"></script>
     {% endblock %}
 
     {% block extra_js %}{% endblock %}