wip: not loading themes until reload, missing in dashboard, bad alignment and scaling

src/lib/components/layout/DashboardHeader.svelte

@@ -2,13 +2,41 @@
 	import { Button } from '$lib/components/ui/button';
 	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
 	import { LanguageToggle } from '$lib/components/ui/language-toggle';
+	import ThemePicker from '$lib/components/ui/theme-picker.svelte';
 	import { signOut } from '@auth/sveltekit/client';
 	import { languageStore } from '$lib/stores/language.svelte';
+	import { enhance } from '$app/forms';
 
-	let { userName, userEmail }: { userName?: string | null; userEmail?: string | null } = $props();
+	let {
+		userName,
+		userEmail,
+		dashboardTheme = 'none'
+	}: {
+		userName?: string | null;
+		userEmail?: string | null;
+		dashboardTheme?: string;
+	} = $props();
 
 	const t = $derived(languageStore.t);
 	const isAuthenticated = $derived(!!userName || !!userEmail);
+
+	let currentTheme = $state(dashboardTheme);
+
+	async function handleThemeChange(theme: string) {
+		currentTheme = theme;
+
+		// Submit form to update theme
+		const formData = new FormData();
+		formData.append('theme', theme);
+
+		await fetch('?/updateDashboardTheme', {
+			method: 'POST',
+			body: formData
+		});
+
+		// Reload to apply new theme
+		window.location.reload();
+	}
 </script>
 
 <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -21,6 +49,9 @@
 		{/if}
 	</div>
 	<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+		{#if isAuthenticated}
+			<ThemePicker value={currentTheme} onValueChange={handleThemeChange} />
+		{/if}
 		<LanguageToggle />
 		<ThemeToggle />
 		{#if isAuthenticated}

src/lib/components/layout/PageContainer.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import ThemeBackground from '$lib/components/themes/ThemeBackground.svelte';
 
-	let { children, maxWidth = '6xl' }: { children: Snippet; maxWidth?: string } = $props();
+	let {
+		children,
+		maxWidth = '6xl',
+		theme = null,
+		themeColor = null
+	}: {
+		children: Snippet;
+		maxWidth?: string;
+		theme?: string | null;
+		themeColor?: string | null;
+	} = $props();
 </script>
 
-<div class="min-h-screen p-4 md:p-8">
-	<div class="max-w-{maxWidth} mx-auto space-y-6">
+<div class="min-h-screen p-4 md:p-8 relative overflow-hidden">
+	<ThemeBackground themeName={theme} color={themeColor} />
+	<div class="max-w-{maxWidth} mx-auto space-y-6 relative z-10">
 		{@render children()}
 	</div>
 </div>