Make WhatsApp follow the system theme

default/chromium/extensions/whatsapp-slim/manifest.json

@@ -1,12 +1,14 @@
 {
   "manifest_version": 3,
   "name": "WhatsApp Slim",
-  "version": "1.0",
+  "version": "1.1",
-  "description": "Collapse WhatsApp Web's chat list to an avatar rail in narrow windows, this extension is installed by Omarchy",
+  "description": "Make WhatsApp Web follow the system theme and collapse its chat list in narrow windows, this extension is installed by Omarchy",
   "content_scripts": [
     {
       "matches": ["https://web.whatsapp.com/*"],
-      "css": ["whatsapp.css"]
+      "css": ["whatsapp.css"],
+      "js": ["system-theme.js"],
+      "run_at": "document_start"
     }
   ]
 }

default/chromium/extensions/whatsapp-slim/system-theme.js

@@ -0,0 +1,4 @@
+if (localStorage.getItem("system-theme-mode") !== "true") {
+  localStorage.setItem("system-theme-mode", "true");
+  location.reload();
+}

test/shell.d/whatsapp-slim-test.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+source "$(dirname "${BASH_SOURCE[0]}")/base-test.sh"
+
+require_command jq
+require_command node
+
+EXT_DIR="$ROOT/default/chromium/extensions/whatsapp-slim"
+
+jq -e '
+  .content_scripts[0].js == ["system-theme.js"] and
+  .content_scripts[0].run_at == "document_start"
+' "$EXT_DIR/manifest.json" >/dev/null || fail "WhatsApp enables system theming before startup"
+
+mode=$(node - "$EXT_DIR/system-theme.js" <<'JS'
+const fs = require("fs")
+const values = new Map()
+let reloaded = false
+global.localStorage = {
+  getItem: key => values.get(key),
+  setItem: (key, value) => values.set(key, value),
+}
+global.location = { reload: () => { reloaded = true } }
+eval(fs.readFileSync(process.argv[2], "utf8"))
+process.stdout.write(`${values.get("system-theme-mode")}:${reloaded}`)
+JS
+)
+
+[[ $mode == "true:true" ]] || fail "WhatsApp selects its system theme mode" "$mode"
+pass "WhatsApp follows the system theme through its existing slim extension"