From 44b72cbc80fb89788470bda75eeb9c0bb3dee2f5 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Sat, 16 May 2026 13:18:08 +0700
Subject: 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

---
 views/layouts/general-page.html | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'views/layouts')

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>
-- 
cgit v1.3.1+13