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 @@ - + 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);