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>