From 7f7be8e98e326f51754d53de2865d4396313f6b4 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Mon, 30 Mar 2026 15:56:21 +0700
Subject: [PATCH] Enhance map styling and dark mode support

- Implemented dynamic tile layer selection based on the current theme (light/dark), improving visual consistency with the overall design.
- Updated attribution handling for the tile layer to reflect the theme, ensuring proper credit is given based on the selected tiles.
- Added custom styles for Leaflet controls to align with the shadcn/tailwind theme, enhancing the user interface and experience.
---
 web/src/routes/ips/+page.svelte | 44 +++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/ips/+page.svelte b/web/src/routes/ips/+page.svelte
index 8cc83ce..862b256 100644
--- a/web/src/routes/ips/+page.svelte
+++ b/web/src/routes/ips/+page.svelte
@@ -37,10 +37,23 @@
 
 		map = leaflet.map(mapEl, { zoomControl: true });
 		map.setView([20, 0], 2);
+
+		const isDark =
+			typeof document !== 'undefined' &&
+			document.documentElement.classList.contains('dark');
+
+		// Тёмные тайлы лучше ложатся на основной dark-дизайн панели.
+		const tileUrl = isDark
+			? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
+			: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+
 		leaflet
-			.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			.tileLayer(tileUrl, {
 				maxZoom: 19,
-				attribution: '&copy; OpenStreetMap contributors'
+				subdomains: ['a', 'b', 'c', 'd'],
+				attribution: isDark
+					? '&copy; OpenStreetMap contributors &copy; CARTO'
+					: '&copy; OpenStreetMap contributors'
 			})
 			.addTo(map);
 		markersLayer = leaflet.layerGroup().addTo(map);
@@ -318,3 +331,30 @@
 		</Card.Content>
 	</Card.Root>
 {/if}
+
+<style>
+	/* Leaflet в shadcn/tailwind теме: подгоняем фон, радиус и контролы */
+	:global(.leaflet-container) {
+		background: transparent;
+		border-radius: inherit;
+	}
+	:global(.leaflet-control-zoom) {
+		border-radius: calc(var(--radius) * 0.5);
+	}
+	:global(.leaflet-control-zoom a),
+	:global(.leaflet-control-zoom a:hover) {
+		background: var(--card);
+		color: var(--card-foreground);
+		border: 1px solid var(--border);
+	}
+	:global(.leaflet-control-attribution) {
+		background: transparent;
+		color: var(--muted-foreground);
+	}
+	:global(.leaflet-control-attribution a) {
+		color: var(--muted-foreground);
+	}
+	:global(.leaflet-control-attribution a:hover) {
+		color: var(--foreground);
+	}
+</style>