feat: all color themes now have light & dark variations depending on preference

feat: color all leaflet elements depending on color theme & scheme
feat: change font to m-plus for short description
fix: theme wheel position on different dpi screens in global map

1 files changed, 10 insertions, 3 deletions

diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 2d125ae..491c652 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -401,15 +401,22 @@
                 localStorage.setItem("theme", theme);
                 document.body.setAttribute("data-theme", theme);
                 switchThemeDecor(theme);
-                if (theme == "ram" || theme == "night") {
+            }
+
+            const savedTheme = localStorage.getItem("theme") || "lilac";
+            switchTheme(savedTheme);
+
+            function switchColorScheme(isNightMode) {
+                if (isNightMode) {
                     makeMultitoneOklch('multitone', 4, '--color-background-dark', '--color-accent-light', '--color-background-light');
                 } else {
                     makeMultitoneOklch('multitone', 4, '--color-background-light', '--color-accent-light', '--color-background-dark');
                 }
             }
 
-            const savedTheme = localStorage.getItem("theme") || "lilac";
-            switchTheme(savedTheme);
+            const mq = matchMedia('(prefers-color-scheme: dark)');
+            switchColorScheme(mq.matches);
+            mq.addEventListener('change', (e) => switchColorScheme(e.matches));
         </script>
 
         <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>