update: better color support on wishlists

src/lib/components/layout/PageContainer.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import ThemeBackground from '$lib/components/themes/ThemeBackground.svelte';
+	import { hexToRgba } from '$lib/utils/colors';
+	import { themeStore } from '$lib/stores/theme.svelte';
 
 	let {
 		children,
@@ -13,9 +15,20 @@
 		theme?: string | null;
 		themeColor?: string | null;
 	} = $props();
+
+	const backgroundStyle = $derived.by(() => {
+		if (!themeColor) return '';
+
+		const isDark = themeStore.getResolvedTheme() === 'dark';
+		const tintedColor = hexToRgba(themeColor, 0.15);
+
+		return isDark
+			? `background: linear-gradient(${tintedColor}, ${tintedColor}), #000000;`
+			: `background-color: ${tintedColor};`;
+	});
 </script>
 
-<div class="min-h-screen p-4 md:p-8 relative overflow-hidden">
+<div class="min-h-screen p-4 md:p-8 relative overflow-hidden" style={backgroundStyle}>
 	<ThemeBackground themeName={theme} color={themeColor} />
 	<div class="max-w-{maxWidth} mx-auto space-y-6 relative z-10">
 		{@render children()}