simplify mode management

website/src/lib/components/Logo.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
 	import { base } from '$app/paths';
-	import { mode } from 'mode-watcher';
+	import { mode, systemPrefersMode } from 'mode-watcher';
 
 	export let iconOnly = false;
 	export let company = 'gpx.studio';
+
+	$: effectiveMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 {#if company === 'gpx.studio'}
 	<img
-		src="{base}/{iconOnly ? 'icon' : 'logo'}{$mode === 'dark' ? '-dark' : ''}.svg"
+		src="{base}/{iconOnly ? 'icon' : 'logo'}{effectiveMode === 'dark' ? '-dark' : ''}.svg"
 		alt="Logo of gpx.studio."
 		{...$$restProps}
 	/>
 {:else if company === 'mapbox'}
 	<img
-		src="{base}/mapbox-logo-{$mode === 'dark' ? 'white' : 'black'}.svg"
+		src="{base}/mapbox-logo-{effectiveMode === 'dark' ? 'white' : 'black'}.svg"
 		alt="Logo of Mapbox."
 		{...$$restProps}
 	/>

website/src/lib/components/Menu.svelte

@@ -70,9 +70,7 @@
 	import LayerControlSettings from '$lib/components/layer-control/LayerControlSettings.svelte';
 	import { allowedPastes, ListFileItem, ListTrackItem } from '$lib/components/file-list/FileList';
 	import Export from '$lib/components/Export.svelte';
-
-	import { resetMode, setMode, systemPrefersMode } from 'mode-watcher';
-
+	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
 	import { _, locale } from 'svelte-i18n';
 	import { languages } from '$lib/languages';
 	import { goto } from '$app/navigation';
@@ -84,7 +82,6 @@
 		temperatureUnits,
 		elevationProfile,
 		verticalFileView,
-		mode,
 		currentBasemap,
 		previousBasemap,
 		currentOverlays,
@@ -94,12 +91,6 @@
 		streetViewSource
 	} = settings;
 
-	$: if ($mode === 'system') {
-		resetMode();
-	} else {
-		setMode($mode);
-	}
-
 	let undoDisabled = derived(canUndo, ($canUndo) => !$canUndo);
 	let redoDisabled = derived(canRedo, ($canRedo) => !$canRedo);
 
@@ -126,6 +117,8 @@
 	}
 
 	let layerSettingsOpen = false;
+
+	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 <div class="absolute md:top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none">
@@ -385,26 +378,22 @@
 					</Menubar.Sub>
 					<Menubar.Sub>
 						<Menubar.SubTrigger>
-							{#if $mode === 'system'}
-								{#if $systemPrefersMode === 'light'}
-									<Sun size="16" class="mr-1" />
-								{:else if $systemPrefersMode === 'dark'}
-									<Moon size="16" class="mr-1" />
-								{:else}
-									<Sun size="16" class="mr-1" />
-								{/if}
-							{:else if $mode === 'light'}
+							{#if selectedMode === 'light'}
 								<Sun size="16" class="mr-1" />
-							{:else if $mode === 'dark'}
+							{:else}
 								<Moon size="16" class="mr-1" />
 							{/if}
 							{$_('menu.mode')}
 						</Menubar.SubTrigger>
 						<Menubar.SubContent>
-							<Menubar.RadioGroup bind:value={$mode}>
+							<Menubar.RadioGroup
+								bind:value={selectedMode}
+								onValueChange={(value) => {
+									setMode(value);
+								}}
+							>
 								<Menubar.RadioItem value="light">{$_('menu.light')}</Menubar.RadioItem>
 								<Menubar.RadioItem value="dark">{$_('menu.dark')}</Menubar.RadioItem>
-								<Menubar.RadioItem value="system">{$_('menu.system')}</Menubar.RadioItem>
 							</Menubar.RadioGroup>
 						</Menubar.SubContent>
 					</Menubar.Sub>

website/src/lib/components/ModeSwitch.svelte

@@ -2,45 +2,30 @@
 	import * as Popover from '$lib/components/ui/popover';
 	import { Button } from '$lib/components/ui/button';
 	import { Moon, Sun } from 'lucide-svelte';
-	import { resetMode, setMode, systemPrefersMode } from 'mode-watcher';
-	import { settings } from '$lib/db';
+	import { mode, resetMode, setMode, systemPrefersMode } from 'mode-watcher';
 	import { _ } from 'svelte-i18n';
 
-	const { mode } = settings;
-
-	$: if ($mode === 'system') {
-		resetMode();
-	} else {
-		setMode($mode);
-	}
-
 	export let size = '20';
 	let open = false;
+
+	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 <Popover.Root bind:open>
 	<Popover.Trigger {...$$restProps}>
-		{#if $mode === 'system'}
-			{#if $systemPrefersMode === 'light'}
-				<Sun {size} class="mr-1" />
-			{:else if $systemPrefersMode === 'dark'}
-				<Moon {size} class="mr-1" />
-			{:else}
-				<Sun {size} class="mr-1" />
-			{/if}
-		{:else if $mode === 'light'}
+		{#if selectedMode === 'light'}
 			<Sun {size} class="mr-1" />
-		{:else if $mode === 'dark'}
+		{:else}
 			<Moon {size} class="mr-1" />
 		{/if}
 	</Popover.Trigger>
 	<Popover.Content class=" w-fit flex flex-col p-2">
-		{#each ['light', 'dark', 'system'] as m}
+		{#each ['light', 'dark'] as m}
 			<Button
 				variant="ghost"
 				class="h-8 justify-start"
 				on:click={() => {
-					$mode = m;
+					setMode(m);
 					open = false;
 				}}>{$_(`menu.${m}`)}</Button
 			>