feat(map): implement dynamic basemap URL based on theme; update map styles across components

frontend/src/lib/components/LocationDropdown.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getBasemapUrl } from '$lib';
 	import { appVersion } from '$lib/config';
 	import { addToast } from '$lib/toasts';
 	import type { Adventure, Lodging, GeocodeSearchResult, Point, ReverseGeocode } from '$lib/types';
@@ -298,7 +299,7 @@
 		<!-- </div> -->
 		<div>
 			<MapLibre
-				style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+				style={getBasemapUrl()}
 				class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
 				standardControls
 				zoom={item.latitude && item.longitude ? 12 : 1}

frontend/src/lib/components/PointSelectionModal.svelte

@@ -8,6 +8,7 @@
 	import { appVersion } from '$lib/config';
 
 	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
+	import { getBasemapUrl } from '$lib';
 
 	let markers: Point[] = [];
 
@@ -106,7 +107,7 @@
 		</form>
 		<h3 class="font-bold text-lg mb-4">Choose a Point</h3>
 		<MapLibre
-			style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+			style={getBasemapUrl()}
 			class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
 			standardControls
 		>

frontend/src/lib/components/TransportationModal.svelte

@@ -11,6 +11,7 @@
 	import { appVersion } from '$lib/config';
 	import { DefaultMarker, MapLibre } from 'svelte-maplibre';
 	import DateRangeCollapse from './DateRangeCollapse.svelte';
+	import { getBasemapUrl } from '$lib';
 
 	export let collection: Collection;
 	export let transportationToEdit: Transportation | null = null;
@@ -38,7 +39,8 @@
 		destination_latitude: transportationToEdit?.destination_latitude || NaN,
 		destination_longitude: transportationToEdit?.destination_longitude || NaN,
 		start_timezone: transportationToEdit?.start_timezone || '',
-		end_timezone: transportationToEdit?.end_timezone || ''
+		end_timezone: transportationToEdit?.end_timezone || '',
+		distance: null
 	};
 
 	let startTimezone: string | undefined = transportation.start_timezone ?? undefined;
@@ -476,7 +478,7 @@
 						{/if}
 						<div class="mt-4">
 							<MapLibre
-								style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+								style={getBasemapUrl()}
 								class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
 								standardControls
 							>

frontend/src/lib/index.ts

@@ -584,3 +584,32 @@ export function debounce(func: Function, timeout: number) {
 		}, timeout);
 	};
 }
+
+export function getIsDarkMode() {
+	const theme = document.documentElement.getAttribute('data-theme');
+
+	if (theme) {
+		const isDark =
+			theme === 'dark' ||
+			theme === 'night' ||
+			theme === 'aestheticDark' ||
+			theme === 'northernLights' ||
+			theme === 'forest';
+		return isDark;
+	}
+
+	// Fallback to browser preference if no theme cookie is set
+	if (typeof window !== 'undefined' && window.matchMedia) {
+		const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		return prefersDark;
+	}
+
+	return false;
+}
+
+export function getBasemapUrl() {
+	if (getIsDarkMode()) {
+		return 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+	}
+	return 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
+}