embedding theme option, closes #57

website/src/lib/components/embedding/Embedding.svelte

@@ -6,7 +6,6 @@
 	import Map from '$lib/components/Map.svelte';
 	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
 	import OpenIn from '$lib/components/embedding/OpenIn.svelte';
-
 	import {
 		gpxStatistics,
 		slicedGPXStatistics,
@@ -22,6 +21,7 @@
 	import { selection } from '$lib/components/file-list/Selection';
 	import { ListFileItem } from '$lib/components/file-list/FileList';
 	import { allowedEmbeddingBasemaps, type EmbeddingOptions } from './Embedding';
+	import { mode, setMode } from 'mode-watcher';
 
 	$embedding = true;
 
@@ -44,7 +44,8 @@
 		directionMarkers: false,
 		distanceUnits: 'metric',
 		velocityUnits: 'speed',
-		temperatureUnits: 'celsius'
+		temperatureUnits: 'celsius',
+		theme: 'system'
 	};
 
 	function applyOptions() {
@@ -160,6 +161,10 @@
 		if (options.temperatureUnits !== $temperatureUnits) {
 			$temperatureUnits = options.temperatureUnits;
 		}
+
+		if (options.theme !== $mode) {
+			setMode(options.theme);
+		}
 	}
 
 	onMount(() => {
@@ -168,6 +173,7 @@
 		prevSettings.distanceUnits = $distanceUnits;
 		prevSettings.velocityUnits = $velocityUnits;
 		prevSettings.temperatureUnits = $temperatureUnits;
+		prevSettings.theme = $mode ?? 'system';
 	});
 
 	$: if (options) {
@@ -199,6 +205,10 @@
 			$temperatureUnits = prevSettings.temperatureUnits;
 		}
 
+		if ($mode !== prevSettings.theme) {
+			setMode(prevSettings.theme);
+		}
+
 		$selection.clear();
 		$fileObservers.clear();
 		$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));

website/src/lib/components/embedding/Embedding.ts

@@ -20,6 +20,7 @@ export type EmbeddingOptions = {
     distanceUnits: 'metric' | 'imperial',
     velocityUnits: 'speed' | 'pace',
     temperatureUnits: 'celsius' | 'fahrenheit',
+    theme: 'system' | 'light' | 'dark',
 };
 
 export const defaultEmbeddingOptions = {
@@ -42,6 +43,7 @@ export const defaultEmbeddingOptions = {
     distanceUnits: 'metric',
     velocityUnits: 'speed',
     temperatureUnits: 'celsius',
+    theme: 'system',
 };
 
 export function getDefaultEmbeddingOptions(): EmbeddingOptions {

website/src/lib/components/embedding/EmbeddingPlayground.svelte

@@ -243,6 +243,23 @@
 					</RadioGroup.Root>
 				</Label>
 			</div>
+			<Label class="flex flex-col items-start gap-2">
+				{$_('menu.mode')}
+				<RadioGroup.Root bind:value={options.theme} class="flex flex-row">
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="system" id="system" />
+						<Label for="system">{$_('menu.system')}</Label>
+					</div>
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="light" id="light" />
+						<Label for="light">{$_('menu.light')}</Label>
+					</div>
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="dark" id="dark" />
+						<Label for="dark">{$_('menu.dark')}</Label>
+					</div>
+				</RadioGroup.Root>
+			</Label>
 			<div class="flex flex-col gap-3 p-3 border rounded-md">
 				<div class="flex flex-row items-center gap-2">
 					<Checkbox id="manual-camera" bind:checked={manualCamera} />

website/src/locales/en.json

@@ -46,6 +46,7 @@
         "fahrenheit": "Fahrenheit",
         "language": "Language",
         "mode": "Theme",
+        "system": "System",
         "light": "Light",
         "dark": "Dark",
         "street_view_source": "Street view source",