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

3 files changed, 12 insertions, 5 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>
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index a6dc006..788eac9 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -229,7 +229,6 @@
             const themeWheel = document.getElementById("theme-wheel");
             const themeButton = document.getElementById("sidebar-theme-button");
             const themeIcons = document.querySelectorAll(".theme-icon");
-            const themeWheelRadius = convertRemToPixels(6);
             const THUMB_BASE = "{{ .ThumbnailBaseUrl }}";
 
             themeIcons.forEach((icon) => {
@@ -294,6 +293,7 @@
                 const buttonRect = themeButton.getBoundingClientRect();
                 const buttonCenterX = buttonRect.left + buttonRect.width / 2;
                 const buttonCenterY = buttonRect.top + buttonRect.height / 2;
+                const themeWheelRadius = convertRemToPixels(6);
 
                 const margin = 0;
 
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index 3eebd58..799955f 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -24,7 +24,7 @@
             <p class="basis-56 grow text-base italic text-secondary text-right">{{ .PublishedTime }}</p>
             {{- end }}
         </div>
-        <p class="font-gentium">{{ .ShortDescription }}</p>
+        <p class="font-m-plus">{{ .ShortDescription }}</p>
         {{- if not $.HideTags }}
         <p class="font-m-plus text-sm">{{ $.L.TagsLabel }} {{ template "catalogue-blog-card-tags.html" . }}</p>
         {{- end }}