src/routes/+layout.svelte

<script>
	import { onDestroy } from 'svelte';
	import { get } from "svelte/store";
  import Icon from "@iconify/svelte";

  import "$lib/assets/tailwind.css";
  import { darkmodeStore } from "$lib/stores/use-dark-mode";

  let isDark = get(darkmodeStore);

  const unsubscribe = darkmodeStore.subscribe((v) => {
    if (typeof window === "undefined") return;
    if (v) {
      document.body.classList.add("dark");
    } else {
      document.body.classList.remove("dark");
    }
    isDark = v
  });

  onDestroy(() => {
    unsubscribe();
  });
</script>

<div class="px-6 h-screen gap-6 flex-col relative z-[1] py-10 overflow-auto">
  <div class="absolute top-0 left-0 w-full z-10">
    <div class="container mx-auto flex items-center justify-between px-6 pt-6">
      <p></p>
      <button
        class="flex items-center justify-center gap-2 bg-gradient-to-br from-black dark:from-teal-500 dark:to-indigo-500 to-zinc-700 shadow-sm px-5 py-2.5 rounded-full text-white dark:text-zinc-100 font-medium font-title text-sm transition-all duration-200 hover:bg-indigo-600"
        on:click={() => {
          darkmodeStore.update((v) => !v);
        }}
      >
        {#if $darkmodeStore}
          <Icon icon="heroicons-outline:light-bulb" class="w-5 h-5" />
          Turn on the lights
        {:else}
          <Icon icon="tabler:bulb-off" class="w-5 h-5" />
          Turn off the lights
        {/if}
      </button>
    </div>
  </div>
  <div class="w-full flex items-center justify-center min-h-full">
    <slot />
  </div>
  <div id="background__dotted"></div>
  <div id="background__noisy"></div>
</div>