From 45457c6f7684b3b81e4d4029447647d6a0d93157 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 24 Jul 2025 15:46:11 +0300
Subject: [PATCH] feat(views/geo): invert marker label on dark themes

---
 .../widgets/view_widgets/geo_view/index.ts    | 44 +++++++++++--------
 .../view_widgets/geo_view/map_layer.ts        | 17 ++++---
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/apps/client/src/widgets/view_widgets/geo_view/index.ts b/apps/client/src/widgets/view_widgets/geo_view/index.ts
index 040e37e18..09b0ca0bf 100644
--- a/apps/client/src/widgets/view_widgets/geo_view/index.ts
+++ b/apps/client/src/widgets/view_widgets/geo_view/index.ts
@@ -1,6 +1,6 @@
 import ViewMode, { ViewModeArgs } from "../view_mode.js";
 import L from "leaflet";
-import type { GPX, LatLng, LeafletMouseEvent, Map, Marker } from "leaflet";
+import type { GPX, LatLng, Layer, LeafletMouseEvent, Map, Marker } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import { t } from "../../../services/i18n.js";
@@ -85,6 +85,11 @@ const TPL = /*html*/`
             white-space: no-wrap;
             overflow: hidden;
         }
+
+        .geo-map-container.dark .leaflet-div-icon .title-label {
+            color: white;
+            text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
+        }
     </style>
 
     <div class="geo-map-container"></div>
@@ -142,7 +147,25 @@ export default class GeoView extends ViewMode<MapData> {
         });
 
         const layerName = this.parentNote.getLabelValue("mapStyle") ?? "openstreetmap";
-        const layer = (await getMapLayer(layerName));
+        let layer: Layer;
+        const layerData = MAP_LAYERS[layerName] ?? MAP_LAYERS["openstreetmap"];
+
+        if (layerData.type === "vector") {
+            const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style());
+            await import("@maplibre/maplibre-gl-leaflet");
+
+            layer = L.maplibreGL({
+                style: style as any
+            });
+        } else {
+            layer = L.tileLayer(layerData.url, {
+                attribution: layerData.attribution,
+                detectRetina: true
+            });
+        }
+
+        this.$container.toggleClass("dark", !!layerData.isDarkTheme);
+
         layer.addTo(map);
 
         this.map = map;
@@ -338,20 +361,3 @@ export default class GeoView extends ViewMode<MapData> {
 
 }
 
-async function getMapLayer(layerName: string) {
-    const layer = MAP_LAYERS[layerName] ?? MAP_LAYERS["openstreetmap"];
-
-    if (layer.type === "vector") {
-        const style = (typeof layer.style === "string" ? layer.style : await layer.style());
-        await import("@maplibre/maplibre-gl-leaflet");
-
-        return L.maplibreGL({
-            style: style as any
-        });
-    }
-
-    return L.tileLayer(layer.url, {
-        attribution: layer.attribution,
-        detectRetina: true
-    });
-}
diff --git a/apps/client/src/widgets/view_widgets/geo_view/map_layer.ts b/apps/client/src/widgets/view_widgets/geo_view/map_layer.ts
index 53ca3db70..43a7c0db4 100644
--- a/apps/client/src/widgets/view_widgets/geo_view/map_layer.ts
+++ b/apps/client/src/widgets/view_widgets/geo_view/map_layer.ts
@@ -1,5 +1,6 @@
 interface Layer {
     name: string;
+    isDarkTheme?: boolean;
 }
 
 interface VectorLayer extends Layer {
@@ -21,29 +22,31 @@ export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     },
     "versatiles-colorful": {
-        name: "Versatiles Colorful (vector)",
+        name: "VersaTiles Colorful (vector)",
         type: "vector",
         style: async () => (await import("./styles/colorful/en.json")).default
     },
     "versatiles-eclipse": {
-        name: "Versatiles Eclipse (vector)",
+        name: "VersaTiles Eclipse (vector)",
         type: "vector",
-        style: async () => (await import("./styles/eclipse/en.json")).default
+        style: async () => (await import("./styles/eclipse/en.json")).default,
+        isDarkTheme: true
     },
     "versatiles-graybeard": {
-        name: "Versatiles Graybeard (vector)",
+        name: "VersaTiles Graybeard (vector)",
         type: "vector",
         style: async () => (await import("./styles/graybeard/en.json")).default
     },
     "versatiles-neutrino": {
-        name: "Versatiles Neutrino (vector)",
+        name: "VersaTiles Neutrino (vector)",
         type: "vector",
         style: async () => (await import("./styles/neutrino/en.json")).default
     },
     "versatiles-shadow": {
-        name: "Versatiles Shadow (vector)",
+        name: "VersaTiles Shadow (vector)",
         type: "vector",
-        style: async () => (await import("./styles/shadow/en.json")).default
+        style: async () => (await import("./styles/shadow/en.json")).default,
+        isDarkTheme: true
     }
 };