<script lang="ts">
  import { blogStorage } from '$/lib/storage';
  import { page } from '$app/state';
  import { onDestroy, onMount, type Snippet } from 'svelte';

  const {
    children,
  }: {
    children: Snippet;
  } = $props();

  onMount(() => {
    const theme =
      page.url.searchParams.get('theme') ?? blogStorage.getItem('theme');
    if (theme) {
      blogStorage.setItem('theme', theme);
      document.documentElement.setAttribute('data-blog-theme', theme);
      page.url.searchParams.delete('theme');
    }
  });
  onDestroy(() => {
    if (typeof document !== 'undefined')
      document.documentElement.removeAttribute('data-blog-theme');
  });
</script>

{@render children()}
