Add dark mode toggle

Finally, it won't be all dark all the time!

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "bulma": "^0.9.4"
+        "bulma": "^0.9.4",
+        "darkmode-js": "^1.5.7"
       },
       "devDependencies": {
         "esbuild": "^0.14.43",
@@ -184,6 +185,11 @@
         "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/define-properties": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -1694,6 +1700,11 @@
         "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=="
+    },
     "define-properties": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",

package.json

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

static/src/js/darkmode.js

@@ -0,0 +1,23 @@
+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();
+  }
+});

templates/base.html

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