Start doing a dark mode myself

darkreader is pretty big, and this is nice, simple and fast.

Not to mention has much less JS

package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
         "bulma": "^0.9.4",
-        "darkreader": "^4.9.51",
         "elevator.js": "^1.0.1",
         "esbuild": "^0.14.43",
         "firacode": "^6.2.0",
@@ -535,15 +534,6 @@
         "node": ">=4"
       }
     },
-    "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/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4241,11 +4231,6 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
-    "darkreader": {
-      "version": "4.9.51",
-      "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
-      "integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ=="
-    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -29,7 +29,6 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "bulma": "^0.9.4",
-    "darkreader": "^4.9.51",
     "elevator.js": "^1.0.1",
     "esbuild": "^0.14.43",
     "firacode": "^6.2.0",

static/src/js/darkmode.js

@@ -0,0 +1,18 @@
+const DARK_MODE_CLASS = "dark-mode";
+const body = document.getElementsByTagName("body")[0];
+
+const matchesDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
+
+function handleDarkMode(darkMode) {
+  if (darkMode) {
+    body.classList.add(DARK_MODE_CLASS);
+  } else {
+    body.classList.remove(DARK_MODE_CLASS);
+  }
+}
+
+matchesDarkMode.addEventListener("change", (event) =>
+  handleDarkMode(event.matches)
+);
+
+handleDarkMode(matchesDarkMode.matches);

static/src/js/darkreader.js

@@ -1,10 +0,0 @@
-const DarkReader = require("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/_footer.scss

@@ -1,4 +1,9 @@
 footer.footer {
   margin-top: auto;
   padding: 1rem;
+
+  @include dark-mode {
+    background-color: $dark;
+    color: $grey-light;
+  }
 }

static/src/scss/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin dark-mode {
+  body.dark-mode & {
+    @content;
+  }
+}

static/src/scss/base.scss

@@ -2,6 +2,7 @@
 @use "sass:color";
 
 @use "bulma_overrides" as *;
+@use "mixins" as *;
 
 @import "bulma/bulma";
 
@@ -29,4 +30,10 @@ main {
 
 a {
   transition: color 0.25s, background-color 0.25s;
+
+  @include dark-mode {
+    &:hover {
+      color: $grey-lighter;
+    }
+  }
 }

website/common/templates/base.html

@@ -41,9 +41,8 @@
     <script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script>
     <script async defer type="text/javascript" src="{% static 'contrib/htmx/htmx.min.js' %}"></script>
 
-    {% block darkmode %}
+    {# Not async to avoid bright flashes #}
-      <script type="text/javascript" src="{% static 'js/darkreader.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/darkmode.js' %}"></script>
-    {% endblock %}
 
     {% block extra_js %}{% endblock %}