<script lang="ts">

	import { ModeWatcher } from "mode-watcher";

	let { children } = $props();

</script>

<ModeWatcher defaultMode="system" />

{@render children()}

<script lang="ts">

	import Button from '$lib/components/base/button.svelte';

	import Icon from '@iconify/svelte';

	import { toggleMode, mode } from 'mode-watcher';

</script>

<Button size="icon" onclick={toggleMode}>

	{#if $mode === 'light'}

		<Icon icon="line-md:moon-to-sunny-outline-loop-transition" />

	{:else}

		<Icon icon="line-md:sunny-outline-to-moon-alt-loop-transition" />

	{/if}

</Button>