fix:OSM

src/lib/components/map/Map.svelte

@@ -36,7 +36,6 @@
 	}
 
 	interface Props {
-		style?: StyleSpecification;
 		center?: [number, number];
 		zoom?: number;
 		class?: string;
@@ -46,25 +45,20 @@
 		sidebarVisible?: boolean;
 	}
 
+	// Map styles - Positron for light mode, Dark Matter for dark mode
+	const LIGHT_STYLE = '/map-styles/positron.json';
+	const DARK_STYLE = '/map-styles/dark-matter.json';
+
+	// Detect dark mode preference
+	let isDarkMode = $state(false);
+	if (typeof window !== 'undefined') {
+		isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	}
+
+	// Compute map style based on dark mode preference
+	const mapStyle = $derived(isDarkMode ? DARK_STYLE : LIGHT_STYLE);
+
 	let {
-		style = {
-			version: 8,
-			sources: {
-				'osm-raster': {
-					type: 'raster',
-					tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
-					tileSize: 256,
-					attribution: '© OpenStreetMap contributors'
-				}
-			},
-			layers: [
-				{
-					id: 'osm-tiles',
-					type: 'raster',
-					source: 'osm-raster'
-				}
-			]
-		},
 		center,
 		zoom,
 		class: className = '',
@@ -85,6 +79,21 @@
 	// Use a plain variable (not reactive) to track programmatic moves
 	let isProgrammaticMove = false;
 
+	// Listen for system theme changes
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		const handleThemeChange = (e: MediaQueryListEvent) => {
+			isDarkMode = e.matches;
+		};
+
+		mediaQuery.addEventListener('change', handleThemeChange);
+		return () => {
+			mediaQuery.removeEventListener('change', handleThemeChange);
+		};
+	});
+
 	// Calculate padding for map centering based on sidebar visibility
 	const getMapPadding = $derived.by(() => {
 		if (!sidebarVisible) {
@@ -247,7 +256,7 @@
 
 	<div class="map-wrapper" class:hidden={!mapReady}>
 		<MapLibre
-			{style}
+			style={mapStyle}
 			center={initialCenter}
 			zoom={initialZoom}
 			bind:map={mapInstance}

static/map-styles/dark-matter.json

@@ -0,0 +1,24 @@
+{
+	"version": 8,
+	"name": "Dark Matter",
+	"sources": {
+		"carto-dark": {
+			"type": "raster",
+			"tiles": [
+				"https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
+				"https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
+				"https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
+				"https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
+			],
+			"tileSize": 256,
+			"attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors &copy; <a href=\"https://carto.com/attributions\">CARTO</a>"
+		}
+	},
+	"layers": [
+		{
+			"id": "carto-dark-layer",
+			"type": "raster",
+			"source": "carto-dark"
+		}
+	]
+}

static/map-styles/positron.json

@@ -0,0 +1,24 @@
+{
+	"version": 8,
+	"name": "Positron (Light)",
+	"sources": {
+		"carto-light": {
+			"type": "raster",
+			"tiles": [
+				"https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+				"https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+				"https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+				"https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
+			],
+			"tileSize": 256,
+			"attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors &copy; <a href=\"https://carto.com/attributions\">CARTO</a>"
+		}
+	},
+	"layers": [
+		{
+			"id": "carto-light-layer",
+			"type": "raster",
+			"source": "carto-light"
+		}
+	]
+}