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

src/routes/dashboard/+page.server.ts

@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad, Actions } from './$types';
 import { db } from '$lib/server/db';
-import { wishlists, savedWishlists } from '$lib/server/schema';
+import { wishlists, savedWishlists, users } from '$lib/server/schema';
 import { eq, and } from 'drizzle-orm';
 
 export const load: PageServerLoad = async (event) => {
@@ -149,6 +149,26 @@ export const actions: Actions = {
 				eq(wishlists.userId, session.user.id)
 			));
 
+		return { success: true };
+	},
+
+	updateDashboardTheme: async ({ request, locals }) => {
+		const session = await locals.auth();
+		if (!session?.user?.id) {
+			throw redirect(303, '/signin');
+		}
+
+		const formData = await request.formData();
+		const theme = formData.get('theme') as string;
+
+		if (!theme) {
+			return { success: false, error: 'Theme is required' };
+		}
+
+		await db.update(users)
+			.set({ dashboardTheme: theme })
+			.where(eq(users.id, session.user.id));
+
 		return { success: true };
 	}
 };

src/routes/dashboard/+page.svelte

@@ -34,8 +34,12 @@
 	});
 </script>
 
-<PageContainer>
-	<DashboardHeader userName={data.user?.name} userEmail={data.user?.email} />
+<PageContainer theme={data.user?.dashboardTheme} themeColor="hsl(var(--primary))">
+	<DashboardHeader
+		userName={data.user?.name}
+		userEmail={data.user?.email}
+		dashboardTheme={data.user?.dashboardTheme || 'none'}
+	/>
 
 	<!-- Local Wishlists Section (for anonymous and authenticated users) -->
 	<LocalWishlistsSection isAuthenticated={data.isAuthenticated} />