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()}

src/lib/components/themes/ThemeBackground.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import TopPattern from './svgs/TopPattern.svelte';
 	import BottomPattern from './svgs/BottomPattern.svelte';
-	import { getTheme, getPatternColor, PATTERN_OPACITY } from '$lib/utils/themes';
+	import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
+	import { themeStore } from '$lib/stores/theme.svelte';
 
 	let {
 		themeName,
@@ -16,7 +17,10 @@
 	} = $props();
 
 	const theme = $derived(getTheme(themeName));
-	const patternColor = $derived(getPatternColor(color));
+	const patternColor = $derived.by(() => {
+		const isDark = themeStore.getResolvedTheme() === 'dark';
+		return isDark ? '#FFFFFF' : '#000000';
+	});
 </script>
 
 {#if theme.pattern !== 'none'}

src/lib/components/themes/ThemeCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import CardPattern from './svgs/CardPattern.svelte';
-	import { getTheme, getPatternColor, PATTERN_OPACITY } from '$lib/utils/themes';
+	import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
+	import { themeStore } from '$lib/stores/theme.svelte';
 
 	let {
 		themeName,
@@ -11,7 +12,10 @@
 	} = $props();
 
 	const theme = $derived(getTheme(themeName));
-	const patternColor = $derived(getPatternColor(color));
+	const patternColor = $derived.by(() => {
+		const isDark = themeStore.getResolvedTheme() === 'dark';
+		return isDark ? '#FFFFFF' : '#000000';
+	});
 </script>
 
 {#if theme.pattern !== 'none'}

src/lib/components/wishlist/EditableItemsList.svelte

@@ -13,13 +13,15 @@
 		rearranging,
 		onStartEditing,
 		onReorder,
-		theme = null
+		theme = null,
+		wishlistColor = null
 	}: {
 		items: Item[];
 		rearranging: boolean;
 		onStartEditing: (item: Item) => void;
 		onReorder: (items: Item[]) => Promise<void>;
 		theme?: string | null;
+		wishlistColor?: string | null;
 	} = $props();
 
 	const t = $derived(languageStore.t);
@@ -30,7 +32,7 @@
 		<div class="space-y-4">
 			{#each items as item (item.id)}
 				<div animate:flip={{ duration: 300 }}>
-				<WishlistItem {item} {theme} showDragHandle={false}>
+				<WishlistItem {item} {theme} {wishlistColor} showDragHandle={false}>
 					<div class="flex gap-2">
 						<Button
 							type="button"

src/lib/components/wishlist/ShareLinks.svelte

@@ -4,15 +4,18 @@
 	import { Label } from '$lib/components/ui/label';
 	import { Card, CardContent } from '$lib/components/ui/card';
 	import { languageStore } from '$lib/stores/language.svelte';
+	import { getCardStyle } from '$lib/utils/colors';
 
 	interface Props {
 		publicUrl: string;
 		ownerUrl?: string;
+		wishlistColor?: string | null;
 	}
 
-	let { publicUrl, ownerUrl }: Props = $props();
+	let { publicUrl, ownerUrl, wishlistColor = null }: Props = $props();
 
 	const t = $derived(languageStore.t);
+	const cardStyle = $derived(getCardStyle(null, wishlistColor));
 
 	let copiedPublic = $state(false);
 	let copiedOwner = $state(false);
@@ -34,7 +37,7 @@
 	}
 </script>
 
-<Card>
+<Card style={cardStyle}>
 	<CardContent class="space-y-4 pt-6">
 		<div class="space-y-2">
 			<Label>{t.wishlist.shareViewOnly}</Label>

src/lib/components/wishlist/WishlistHeader.svelte

@@ -8,6 +8,7 @@
 	import ThemePicker from "$lib/components/ui/theme-picker.svelte";
 	import type { Wishlist } from "$lib/server/schema";
 	import { languageStore } from '$lib/stores/language.svelte';
+	import { getCardStyle } from '$lib/utils/colors';
 
 	let {
 		wishlist,
@@ -39,6 +40,8 @@
 			: null,
 	);
 
+	const cardStyle = $derived(getCardStyle(null, wishlistColor));
+
 	async function saveTitle() {
 		if (!wishlistTitle.trim()) {
 			wishlistTitle = wishlist.title;
@@ -134,7 +137,7 @@
 </div>
 
 <!-- Settings Card -->
-<Card>
+<Card style={cardStyle}>
 	<CardContent class="pt-6 space-y-4">
 		<!-- Description -->
 		<div class="space-y-2">

src/lib/components/wishlist/WishlistItem.svelte

@@ -13,6 +13,7 @@
 		children?: any;
 		showDragHandle?: boolean;
 		theme?: string | null;
+		wishlistColor?: string | null;
 	}
 
 	let {
@@ -20,7 +21,8 @@
 		showImage = true,
 		children,
 		showDragHandle = false,
-		theme = null
+		theme = null,
+		wishlistColor = null
 	}: Props = $props();
 
 	const t = $derived(languageStore.t);
@@ -51,7 +53,7 @@
 		return `${symbol}${amount}`;
 	}
 
-	const cardStyle = $derived(getCardStyle(item.color));
+	const cardStyle = $derived(getCardStyle(item.color, wishlistColor));
 </script>
 
 <Card style={cardStyle} class="relative overflow-hidden">