From c38eddc122b1e8af17d92cb9f6d79bb26c2d9ed8 Mon Sep 17 00:00:00 2001
From: Fritz Lin <uxfritz@163.com>
Date: Thu, 4 Jan 2024 16:06:43 +0800
Subject: [PATCH] fix: mapbox example popup color in dark mode

---
 .../examples/16-context/00-context-api/MapMarker.svelte    | 7 +++++++
 .../15-context/01-context-api/app-a/MapMarker.svelte       | 7 +++++++
 .../15-context/01-context-api/app-b/MapMarker.svelte       | 7 +++++++
 3 files changed, 21 insertions(+)

diff --git a/documentation/examples/16-context/00-context-api/MapMarker.svelte b/documentation/examples/16-context/00-context-api/MapMarker.svelte
index 9c6df339cf..cef4a83b69 100644
--- a/documentation/examples/16-context/00-context-api/MapMarker.svelte
+++ b/documentation/examples/16-context/00-context-api/MapMarker.svelte
@@ -13,3 +13,10 @@
 
 	const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
 </script>
+
+<style>
+	:global(.mapboxgl-popup-content) {
+		color: hsl(0, 0%, 13%);
+		color-scheme: none;
+	}
+</style>
diff --git a/documentation/tutorial/15-context/01-context-api/app-a/MapMarker.svelte b/documentation/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
index 94436445c7..b2df0e9c13 100644
--- a/documentation/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
+++ b/documentation/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
@@ -11,3 +11,10 @@
 
 	const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
 </script>
+
+<style>
+	:global(.mapboxgl-popup-content) {
+		color: hsl(0, 0%, 13%);
+		color-scheme: none;
+	}
+</style>
diff --git a/documentation/tutorial/15-context/01-context-api/app-b/MapMarker.svelte b/documentation/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
index 9c6df339cf..cef4a83b69 100644
--- a/documentation/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
+++ b/documentation/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
@@ -13,3 +13,10 @@
 
 	const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
 </script>
+
+<style>
+	:global(.mapboxgl-popup-content) {
+		color: hsl(0, 0%, 13%);
+		color-scheme: none;
+	}
+</style>