mirror of
https://github.com/Xevion/xevion.dev.git
synced 2026-01-31 04:26:43 -06:00
Xevion
5c4d3b6efa
- Implement theme store with localStorage persistence - Add ThemeToggle component with animated icon transitions - Update color system with semantic tokens for light/dark modes - Add blocking script in app.html to prevent FOUC - Apply theme-aware styling across all public and admin pages
34 lines
901 B
Svelte
34 lines
901 B
Svelte
<script lang="ts">
|
|
import { cn } from "$lib/utils";
|
|
import type { Snippet } from "svelte";
|
|
import Dots from "./Dots.svelte";
|
|
import ThemeToggle from "./ThemeToggle.svelte";
|
|
|
|
let {
|
|
class: className = "",
|
|
backgroundClass = "",
|
|
bgColor = "",
|
|
showThemeToggle = true,
|
|
children,
|
|
}: {
|
|
class?: string;
|
|
backgroundClass?: string;
|
|
bgColor?: string;
|
|
showThemeToggle?: boolean;
|
|
children?: Snippet;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class={cn("pointer-events-none fixed inset-0 -z-20 bg-white dark:bg-black transition-colors duration-300", bgColor)}></div>
|
|
<Dots class={[backgroundClass]} />
|
|
{#if showThemeToggle}
|
|
<div class="fixed top-5 right-6 z-50">
|
|
<ThemeToggle />
|
|
</div>
|
|
{/if}
|
|
<main class={cn("relative min-h-screen text-zinc-900 dark:text-zinc-50 transition-colors duration-300", className)}>
|
|
{#if children}
|
|
{@render children()}
|
|
{/if}
|
|
</main>
|