light mode semi-functional

website/src/lib/components/InteractiveMap.svelte

@@ -5,6 +5,42 @@
 	import { themeState } from '$lib/states/theme.svelte';
 	import 'maplibre-gl/dist/maplibre-gl.css';
 
+	function addMapLayers(map: any, isLight: boolean) {
+    if (!map.getSource('study-locations')) {
+        map.addSource('study-locations', {
+            type: 'geojson',
+            data: {
+                type: 'FeatureCollection',
+                features: UMD_LOCATIONS.map(loc => ({
+                    type: 'Feature',
+                    geometry: { type: 'Point', coordinates: [loc.lng, loc.lat] },
+                    properties: { name: loc.name }
+                }))
+            }
+        });
+    }
+
+    if (!map.getLayer('study-locations-labels')) {
+        map.addLayer({
+            id: 'study-locations-labels',
+            type: 'symbol',
+            source: 'study-locations',
+            layout: {
+                'text-field': ['get', 'name'],
+                'text-size': 13,
+                'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
+                'text-radial-offset': 1,
+                'text-justify': 'center'
+            },
+            paint: {
+                'text-color': isLight ? '#1e1e2e' : '#ffffff',
+                'text-halo-color': isLight ? '#ffffff' : '#000000',
+                'text-halo-width': 2
+            }
+        });
+    }
+	}
+
 	let mapContainer: HTMLDivElement | undefined = $state();
 	let mapInstance: any = $state();
 
@@ -25,98 +61,73 @@
 
 	$effect(() => {
 		if (mapInstance) {
-			const style = themeState.isLight 
+			const isLight = themeState.isLight;
+			const style = isLight 
 				? 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
 				: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
-			untrack(() => { mapInstance.setStyle(style); });
+			untrack(() => {
+				mapInstance.setStyle(style);
+				mapInstance.once('style.load', () => addMapLayers(mapInstance, isLight));
+			});
 		}
 	});
 
-	onMount(async () => {
+	onMount(() => {
-		if (!browser || !mapContainer) return;
+    if (!browser || !mapContainer) return;
-		
-		const { Map, NavigationControl } = await import('maplibre-gl');
 
-		const map = new Map({
+    let map: any;
-			container: mapContainer,
-			style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-			center: [-76.9425, 38.9859], // UMD McKeldin Mall
-			zoom: 16.5,
-			pitch: 0,
-			bearing: 0,
-			attributionControl: false
-		});
 
-		map.addControl(new NavigationControl({
+    (async () => {
-			visualizePitch: true
+        const { Map, NavigationControl } = await import('maplibre-gl');
-		}), 'bottom-right');
 
-		mapInstance = map;
+        map = new Map({
+            container: mapContainer!,
+            style: themeState.isLight
+                ? 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
+                : 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+            center: [-76.9425, 38.9859],
+            zoom: 16.5,
+            pitch: 0,
+            bearing: 0,
+            attributionControl: false
+        });
 
-		map.on('load', () => {
+        map.addControl(new NavigationControl({ visualizePitch: true }), 'bottom-right');
-			map.addSource('study-locations', {
+        mapInstance = map;
-				type: 'geojson',
-				data: {
-					type: 'FeatureCollection',
-					features: UMD_LOCATIONS.map(loc => ({
-						type: 'Feature',
-						geometry: { type: 'Point', coordinates: [loc.lng, loc.lat] },
-						properties: { name: loc.name }
-					}))
-				}
-			});
 
-			map.addLayer({
+        map.on('load', () => addMapLayers(map, themeState.isLight));
-				id: 'study-locations-labels',
+		})();
-				type: 'symbol',
-				source: 'study-locations',
-				layout: {
-					'text-field': ['get', 'name'],
-					'text-size': 13,
-					'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
-					'text-radial-offset': 1,
-					'text-justify': 'center'
-				},
-				paint: {
-					'text-color': '#ffffff',
-					'text-halo-color': '#000000',
-					'text-halo-width': 2
-				}
-			});
-		});
 
 		return () => {
-			map.remove();
+			map?.remove();
 		};
 	});
 </script>
 
 <div class="absolute inset-0 z-0 bg-crust transition-colors duration-500">
-	<div bind:this={mapContainer} class="absolute inset-0 z-0 {themeState.isLight ? 'mix-blend-normal opacity-100 filter brightness-105 contrast-125 grayscale' : 'mix-blend-luminosity opacity-90'} transition-all duration-500" style="width: 100%; height: 100%;"></div>
+    <div bind:this={mapContainer} class="absolute inset-0 z-0 {themeState.isLight ? 'opacity-100' : 'mix-blend-luminosity opacity-90'} transition-all duration-500" style="width: 100%; height: 100%;"></div>
-	<!-- Color Screen Wash -->
+    {#if !themeState.isLight}
-	<div class="absolute inset-0 pointer-events-none {themeState.isLight ? 'mix-blend-screen bg-white opacity-20' : 'mix-blend-color bg-crust opacity-100'} z-10 transition-all duration-500"></div>
+    <div class="absolute inset-0 pointer-events-none mix-blend-color bg-crust opacity-100 z-10 transition-all duration-500"></div>
+    {/if}
 </div>
 
 	<style>
 	:global(.maplibregl-ctrl-group) {
-		background: rgba(15, 23, 42, 0.8) !important;
+	background: var(--color-panel-glass) !important; /* already switches per theme */
-		backdrop-filter: blur(12px) !important;
+	backdrop-filter: blur(12px) !important;
-		border: 1px solid rgba(255, 255, 255, 0.1) !important;
+	border: 1px solid color-mix(in srgb, var(--color-surface1) 30%, transparent) !important;
-		border-left: 2px solid var(--color-neon-primary) !important;
+	box-shadow: var(--shadow-glow-primary) !important;
-		box-shadow: var(--shadow-glow-primary) !important;
+	border-radius: 12px !important;
-		border-radius: 12px !important;
+	overflow: hidden;
-		overflow: hidden;
 	}
 	:global(.maplibregl-ctrl-group button) {
-		width: 40px !important;
+	width: 40px !important;
-		height: 40px !important;
+	height: 40px !important;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+	border-bottom: 1px solid color-mix(in srgb, var(--color-surface1) 20%, transparent) !important;
-	}
-	:global(.maplibregl-ctrl-group button:last-child) {
-		border-bottom: none !important;
 	}
 	:global(.maplibregl-ctrl-icon) {
-		filter: invert(1) opacity(0.8) !important;
+	filter: opacity(0.8) !important;
+	filter: drop-shadow(0 0 1px #000000) !important;
 	}
 	:global(.maplibregl-ctrl-group button:hover) {
 		background: rgba(255, 255, 255, 0.1) !important;

website/src/lib/components/MapControls.svelte

@@ -32,7 +32,7 @@
 			if (val === 'default') {
 				mapState.flyHome();
 			} else if (val) {
-				const loc = UMD_LOCATIONS.find(l => l.name === val);
+				const loc = UMD_LOCATIONS.find((l: { name: string; lat: number; lng: number }) => l.name === val);
 				if (loc) {
 					mapState.flyTo(loc.lng, loc.lat, 18);
 				}

website/src/routes/layout.css

@@ -43,15 +43,21 @@
 	color: #585b70 !important;
 }
 
-.light-theme border-white {
+.light-theme .border-white {
 	border-color: rgba(88, 91, 112, 0.1);
 }
 
+.light-theme .border-white\/5,
+.light-theme .border-white\/10,
+.light-theme .border-white\/20 {
+	border-color: rgba(88, 91, 112, 0.15);
+}
+
 @utility glass-panel {
   background-color: var(--color-panel-glass);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid color-mix(in srgb, var(--color-surface1) 30%, transparent);
 }
 
 @utility text-glow {