Spaces:
Running
Running
File size: 1,613 Bytes
fcc7678 cd13b30 fcc7678 cd13b30 fcc7678 37e0123 ad49b80 cd13b30 ad49b80 cd13b30 ad49b80 cd13b30 37e0123 cd13b30 fcc7678 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<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> |