From d4c76f8718cd5746de3d7f1c66c676a6290256c0 Mon Sep 17 00:00:00 2001
From: Sean Morley <mail@seanmorley.com>
Date: Fri, 13 Jun 2025 23:49:14 -0400
Subject: [PATCH] feat(map): implement dynamic basemap URL based on theme;
 update map styles across components

---
 .../lib/components/LocationDropdown.svelte    |  3 +-
 .../lib/components/PointSelectionModal.svelte |  3 +-
 .../lib/components/TransportationModal.svelte |  6 ++--
 frontend/src/lib/index.ts                     | 29 +++++++++++++++++++
 .../src/routes/adventures/[id]/+page.svelte   |  4 +--
 frontend/src/routes/collections/+page.svelte  |  8 ++---
 .../src/routes/collections/[id]/+page.svelte  |  7 +++--
 frontend/src/routes/map/+page.svelte          |  3 +-
 frontend/src/routes/worldtravel/+page.svelte  |  3 +-
 .../src/routes/worldtravel/[id]/+page.svelte  |  3 +-
 .../routes/worldtravel/[id]/[id]/+page.svelte |  3 +-
 11 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/LocationDropdown.svelte b/frontend/src/lib/components/LocationDropdown.svelte
index f9e88c0..795b162 100644
--- a/frontend/src/lib/components/LocationDropdown.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/PointSelectionModal.svelte b/frontend/src/lib/components/PointSelectionModal.svelte
index 0728a9a..dfd56ef 100644
--- a/frontend/src/lib/components/PointSelectionModal.svelte
+++ b/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
 		>
diff --git a/frontend/src/lib/components/TransportationModal.svelte b/frontend/src/lib/components/TransportationModal.svelte
index c90ea75..5dfdb7c 100644
--- a/frontend/src/lib/components/TransportationModal.svelte
+++ b/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
 							>
diff --git a/frontend/src/lib/index.ts b/frontend/src/lib/index.ts
index d66abec..ee621cc 100644
--- a/frontend/src/lib/index.ts
+++ b/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';
+}
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index ac5a026..3977b9c 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -19,7 +19,7 @@
 	import AdventureModal from '$lib/components/AdventureModal.svelte';
 	import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
 	import AttachmentCard from '$lib/components/AttachmentCard.svelte';
-	import { isAllDay } from '$lib';
+	import { getBasemapUrl, isAllDay } from '$lib';
 
 	let geojson: any;
 
@@ -600,7 +600,7 @@
 
 							<div class="rounded-lg overflow-hidden shadow-lg">
 								<MapLibre
-									style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+									style={getBasemapUrl()}
 									class="w-full h-96"
 									standardControls
 									center={{ lng: adventure.longitude || 0, lat: adventure.latitude || 0 }}
diff --git a/frontend/src/routes/collections/+page.svelte b/frontend/src/routes/collections/+page.svelte
index 605ebfe..2be47b1 100644
--- a/frontend/src/routes/collections/+page.svelte
+++ b/frontend/src/routes/collections/+page.svelte
@@ -280,14 +280,14 @@
 							{activeView === 'owned'
 								? 'No collections yet'
 								: activeView === 'shared'
-									? 'No shared collections'
+									? 'No shared collections.'
 									: 'No archived collections'}
 						</h3>
 						<p class="text-base-content/50 text-center max-w-md">
 							{activeView === 'owned'
 								? 'Create your first collection to organize your adventures and memories.'
 								: activeView === 'shared'
-									? 'Collections shared with you will appear here.'
+									? 'Make sure your profile is public so others can share with you.'
 									: 'Archived collections will appear here.'}
 						</p>
 						{#if activeView === 'owned'}
@@ -429,7 +429,7 @@
 					</div>
 
 					<!-- Quick Actions -->
-					<div class="space-y-3 mt-6">
+					<!-- <div class="space-y-3 mt-6">
 						<button
 							type="button"
 							class="btn btn-outline w-full gap-2"
@@ -438,7 +438,7 @@
 							<Archive class="w-4 h-4" />
 							{$t(`adventures.archived_collections`)}
 						</button>
-					</div>
+					</div> -->
 				</div>
 			</div>
 		</div>
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index 03e2762..32f94cb 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -30,7 +30,8 @@
 		groupChecklistsByDate,
 		osmTagToEmoji,
 		groupLodgingByDate,
-		LODGING_TYPES_ICONS
+		LODGING_TYPES_ICONS,
+		getBasemapUrl
 	} from '$lib';
 	import ChecklistCard from '$lib/components/ChecklistCard.svelte';
 	import ChecklistModal from '$lib/components/ChecklistModal.svelte';
@@ -1233,7 +1234,7 @@
 			<div class="card-body">
 				<h2 class="card-title text-3xl justify-center mb-4">Trip Map</h2>
 				<MapLibre
-					style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+					style={getBasemapUrl()}
 					class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-full rounded-lg"
 					standardControls
 				>
@@ -1459,7 +1460,7 @@
 
 				{#if recomendationsData}
 					<MapLibre
-						style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+						style={getBasemapUrl()}
 						class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max
 						-h-full w-full rounded-lg"
 						standardControls
diff --git a/frontend/src/routes/map/+page.svelte b/frontend/src/routes/map/+page.svelte
index b240606..74bdb08 100644
--- a/frontend/src/routes/map/+page.svelte
+++ b/frontend/src/routes/map/+page.svelte
@@ -5,6 +5,7 @@
 	import type { Adventure, VisitedRegion } from '$lib/types.js';
 	import CardCarousel from '$lib/components/CardCarousel.svelte';
 	import { goto } from '$app/navigation';
+	import { getBasemapUrl } from '$lib';
 	export let data;
 
 	let createModalOpen: boolean = false;
@@ -117,7 +118,7 @@
 {/if}
 
 <MapLibre
-	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+	style={getBasemapUrl()}
 	class="mx-auto aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
 	standardControls
 >
diff --git a/frontend/src/routes/worldtravel/+page.svelte b/frontend/src/routes/worldtravel/+page.svelte
index b9c8d30..766588c 100644
--- a/frontend/src/routes/worldtravel/+page.svelte
+++ b/frontend/src/routes/worldtravel/+page.svelte
@@ -16,6 +16,7 @@
 	import Check from '~icons/mdi/check-circle';
 	import Progress from '~icons/mdi/progress-check';
 	import Cancel from '~icons/mdi/cancel';
+	import { getBasemapUrl } from '$lib';
 
 	export let data: PageData;
 	console.log(data);
@@ -230,7 +231,7 @@
 					<div class="card bg-base-100 shadow-xl">
 						<div class="card-body p-4">
 							<MapLibre
-								style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+								style={getBasemapUrl()}
 								class="aspect-[16/10] w-full rounded-lg"
 								standardControls
 								zoom={2}
diff --git a/frontend/src/routes/worldtravel/[id]/+page.svelte b/frontend/src/routes/worldtravel/[id]/+page.svelte
index 958079d..43b9214 100644
--- a/frontend/src/routes/worldtravel/[id]/+page.svelte
+++ b/frontend/src/routes/worldtravel/[id]/+page.svelte
@@ -19,6 +19,7 @@
 	import Trophy from '~icons/mdi/trophy';
 	import Target from '~icons/mdi/target';
 	import Flag from '~icons/mdi/flag';
+	import { getBasemapUrl } from '$lib';
 
 	export let data: PageData;
 
@@ -281,7 +282,7 @@
 							</div>
 						</div>
 						<MapLibre
-							style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+							style={getBasemapUrl()}
 							class="aspect-[16/10] w-full rounded-lg"
 							standardControls
 							center={[regions[0]?.longitude || 0, regions[0]?.latitude || 0]}
diff --git a/frontend/src/routes/worldtravel/[id]/[id]/+page.svelte b/frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
index f221298..b8b70ad 100644
--- a/frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
+++ b/frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getBasemapUrl } from '$lib';
 	import CityCard from '$lib/components/CityCard.svelte';
 	import { addToast } from '$lib/toasts';
 	import type { City } from '$lib/types';
@@ -102,7 +103,7 @@
 		<!-- checkbox to toggle marker -->
 
 		<MapLibre
-			style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+			style={getBasemapUrl()}
 			class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
 			standardControls
 			center={allCities[0] && allCities[0].longitude !== null && allCities[0].latitude !== null