From 1141fd3f87af0736e430cbfb3dadafcfa272ba88 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Thu, 19 Mar 2026 23:40:09 +0000
Subject: [PATCH] fix: live map tiles swap instantly on theme toggle via
 MutationObserver

---
 public/index.html |  2 +-
 public/live.js    | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6cc7ed10..d9faff94 100644
--- a/public/index.html
+++ b/public/index.html
@@ -84,7 +84,7 @@
   <script src="nodes.js?v=1773961950" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="traces.js?v=1774079160" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="analytics.js?v=1773961035" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="live.js?v=1773963309" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="live.js?v=1773963609" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="observers.js?v=1774079160" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1773961276" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
diff --git a/public/live.js b/public/live.js
index c14eb3cb..355fe02e 100644
--- a/public/live.js
+++ b/public/live.js
@@ -642,10 +642,17 @@
 
     const isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
       (document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-    const tileUrl = isDark
-      ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-      : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
-    L.tileLayer(tileUrl, { maxZoom: 19 }).addTo(map);
+    const DARK_TILES = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
+    const LIGHT_TILES = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
+    let tileLayer = L.tileLayer(isDark ? DARK_TILES : LIGHT_TILES, { maxZoom: 19 }).addTo(map);
+
+    // Swap tiles when theme changes
+    const _themeObs = new MutationObserver(function () {
+      const dark = document.documentElement.getAttribute('data-theme') === 'dark' ||
+        (document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+      tileLayer.setUrl(dark ? DARK_TILES : LIGHT_TILES);
+    });
+    _themeObs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
     L.control.zoom({ position: 'topright' }).addTo(map);
 
     nodesLayer = L.layerGroup().addTo(map);