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

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}

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]}

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