1<script lang="ts">
 2	import { ModeWatcher } from 'mode-watcher';
 3	import { onMount } from 'svelte';
 4
 5	interface Props {
 6		children?: any;
 7	}
 8
 9	let { children }: Props = $props();
10
11	onMount(() => {
12		const root = document.documentElement;
13		const theme = localStorage.getItem('mode-watcher-mode') || 'system';
14
15		if (theme === 'dark') {
16			root.classList.add('dark');
17		} else if (theme === 'light') {
18			root.classList.remove('dark');
19		} else {
20			const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
21			if (prefersDark) {
22				root.classList.add('dark');
23			} else {
24				root.classList.remove('dark');
25			}
26		}
27	});
28</script>
29
30<ModeWatcher />
31
32{#if children}
33	{@const Component = children}
34
35	<Component />
36{/if}