wip: making themes more dynamic and easy to add

src/lib/components/themes/ThemeBackground.svelte

@@ -1,37 +1,38 @@
 <script lang="ts">
 	import TopPattern from './svgs/TopPattern.svelte';
 	import BottomPattern from './svgs/BottomPattern.svelte';
-	import { getTheme, getThemeColor } from '$lib/utils/themes';
+	import { getTheme } from '$lib/utils/themes';
+
+	const patternOpacity = 0.1;
 
 	let {
 		themeName,
-		color,
 		showTop = true,
-		showBottom = true
+		showBottom = true,
+		color = "#FFFFFF"
 	}: {
 		themeName?: string | null;
-		color?: string | null;
 		showTop?: boolean;
 		showBottom?: boolean;
+		color?: string;
 	} = $props();
 
 	const theme = $derived(getTheme(themeName));
-	const themeColor = $derived(getThemeColor(color));
 </script>
 
 {#if theme.pattern !== 'none'}
 	{#if showTop}
 		<TopPattern
 			pattern={theme.pattern}
-			color={themeColor}
+			color={color}
-			opacity={theme.opacity}
+			opacity={patternOpacity}
 		/>
 	{/if}
 	{#if showBottom}
 		<BottomPattern
 			pattern={theme.pattern}
-			color={themeColor}
+			color={color}
-			opacity={theme.opacity}
+			opacity={patternOpacity}
 		/>
 	{/if}
 {/if}

src/lib/components/themes/ThemeCard.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
 	import CardPattern from './svgs/CardPattern.svelte';
-	import { getTheme, getThemeColor } from '$lib/utils/themes';
+	import { getTheme } from '$lib/utils/themes';
+
+	const patternOpacity = 0.1;
 
 	let {
 		themeName,
 		color
 	}: {
-		themeName?: string | null;
+		themeName?: string;
-		color?: string | null;
+		color?: string;
 	} = $props();
 
 	const theme = $derived(getTheme(themeName));
-	const themeColor = $derived(getThemeColor(color));
 </script>
 
 {#if theme.pattern !== 'none'}
 	<CardPattern
 		pattern={theme.pattern}
-		color={themeColor}
+		opacity={patternOpacity}
-		opacity={theme.opacity}
 	/>
 {/if}

src/lib/components/themes/svgs/CardPattern.svelte

@@ -1,38 +1,14 @@
 <script lang="ts">
+	import { asset } from '$app/paths';
 	let {
-		color = 'currentColor',
+		pattern = 'none'
-		opacity = 0.08,
-		pattern = 'waves'
 	}: {
-		color?: string;
+		pattern?: string;
-		opacity?: number;
-		pattern?: 'waves' | 'geometric' | 'dots';
 	} = $props();
+	const patternPath = `/themes/${pattern}/item.svg`;
+	const patternOpacity = 0.2;
 </script>
 
-<div class="absolute bottom-0 left-0 right-0 pointer-events-none overflow-hidden rounded-b-lg" style="opacity: {opacity};">
+<div class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg" style="opacity: {patternOpacity};">
-	{#if pattern === 'waves'}
+	<img alt="card svg background pattern" src={asset(patternPath)}>
-		<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fill={color}
-				d="M0,40 C100,20 200,60 300,40 C350,30 375,35 400,40 L400,80 L0,80 Z"
-			/>
-		</svg>
-	{:else if pattern === 'geometric'}
-		<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fill={color}
-				d="M0,80 L200,20 L400,80 Z"
-			/>
-		</svg>
-	{:else if pattern === 'dots'}
-		<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
-			<defs>
-				<pattern id="dots-pattern-card" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
-					<circle cx="10" cy="10" r="2" fill={color} />
-				</pattern>
-			</defs>
-			<rect width="400" height="80" fill="url(#dots-pattern-card)" />
-		</svg>
-	{/if}
 </div>

src/lib/components/themes/svgs/TopPattern.svelte

@@ -1,38 +1,45 @@
 <script lang="ts">
+    import { asset } from "$app/paths";
+	import { themeStore } from '$lib/stores/theme.svelte';
+
 	let {
-		color = 'currentColor',
+		pattern = 'none'
-		opacity = 0.1,
-		pattern = 'waves'
 	}: {
-		color?: string;
+		pattern?: string;
-		opacity?: number;
-		pattern?: 'waves' | 'geometric' | 'dots';
 	} = $props();
+	const patternOpacity = 0.1;
+
+	let svgContainer = $state<HTMLDivElement>();
+	let svgContent = $state('');
+	const lightColor = "#000000";
+	const darkColor = "#FFFFFF";
+
+    $effect(() => {
+        const patternPath = `/themes/${pattern}/bgtop.svg`;
+		const color = themeStore.getResolvedTheme() === 'dark' ? darkColor : lightColor;
+        
+        fetch(asset(patternPath))
+            .then(res => res.text())
+            .then(svg => {
+                // Manipulate SVG to change colors
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(svg, 'image/svg+xml');
+                const svgEl = doc.querySelector('svg');
+                
+                if (svgEl) {
+                    // Change fill colors
+                    svgEl.querySelectorAll('[fill]').forEach(el => {
+                        if (el.getAttribute('fill') !== 'none') {
+                            el.setAttribute('fill', color);
+                        }
+                    });
+                    
+                    svgContent = svgEl.outerHTML;
+                }
+            });
+    });
 </script>
 
-<div class="absolute top-0 left-0 right-0 pointer-events-none overflow-hidden" style="opacity: {opacity};">
+<div class="absolute top-0 left-0 right-0 pointer-events-none overflow-hidden" bind:this={svgContainer} style="opacity: {patternOpacity};">
-	{#if pattern === 'waves'}
+	{@html svgContent}
-		<svg class="w-full h-auto" viewBox="0 0 1440 200" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fill={color}
-				d="M0,100 C240,150 480,50 720,100 C960,150 1200,50 1440,100 L1440,0 L0,0 Z"
-			/>
-		</svg>
-	{:else if pattern === 'geometric'}
-		<svg class="w-full h-auto" viewBox="0 0 1440 200" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fill={color}
-				d="M0,0 L720,150 L1440,0 Z"
-			/>
-		</svg>
-	{:else if pattern === 'dots'}
-		<svg class="w-full h-auto" viewBox="0 0 1440 200" xmlns="http://www.w3.org/2000/svg">
-			<defs>
-				<pattern id="dots-pattern-top" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
-					<circle cx="20" cy="20" r="3" fill={color} />
-				</pattern>
-			</defs>
-			<rect width="1440" height="200" fill="url(#dots-pattern-top)" />
-		</svg>
-	{/if}
 </div>

src/lib/components/wishlist/WishlistHeader.svelte

@@ -106,7 +106,7 @@
 					editingTitle = true;
 				}
 			}}
-			class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
+			class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
 			aria-label={editingTitle ? "Save title" : "Edit title"}
 		>
 			{#if editingTitle}
@@ -116,12 +116,12 @@
 			{/if}
 		</button>
 	</div>
-	<div class="flex items-center gap-2 flex-shrink-0">
+	<div class="flex items-center gap-2 shrink-0">
 		<ThemePicker
 			value={wishlistTheme}
 			onValueChange={async (theme) => {
 				wishlistTheme = theme;
-				await onThemeUpdate(theme);
+				onThemeUpdate(theme);
 				// Force reactivity by updating the wishlist object
 				wishlist.theme = theme;
 			}}

src/lib/stores/theme.svelte.ts

@@ -1,6 +1,7 @@
 import { browser } from '$app/environment';
 
 type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
 
 class ThemeStore {
 	current = $state<Theme>('system');
@@ -35,6 +36,12 @@ class ThemeStore {
 		}
 	}
 
+	getResolvedTheme(): ResolvedTheme {
+		const isDark = this.current === 'dark' ||
+			(this.current === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+		return isDark ? 'dark' : 'light';
+	}
+
 	toggle() {
 		// Cycle through: light -> dark -> system -> light
 		if (this.current === 'light') {

src/lib/utils/themes.ts

@@ -7,29 +7,24 @@ export type ThemePattern = 'waves' | 'geometric' | 'dots' | 'none';
 export interface Theme {
 	name: string;
 	pattern: ThemePattern;
-	opacity: number;
 }
 
 export const AVAILABLE_THEMES: Record<string, Theme> = {
 	none: {
 		name: 'None',
 		pattern: 'none',
-		opacity: 0
 	},
 	waves: {
 		name: 'Waves',
 		pattern: 'waves',
-		opacity: 0.1
 	},
 	geometric: {
 		name: 'Geometric',
 		pattern: 'geometric',
-		opacity: 0.1
 	},
 	dots: {
 		name: 'Dots',
 		pattern: 'dots',
-		opacity: 0.15
 	}
 };
 
@@ -41,16 +36,3 @@ export function getTheme(themeName?: string | null): Theme {
 	}
 	return AVAILABLE_THEMES[themeName];
 }
-
-/**
- * Get color from a CSS color string or class
- * Returns the provided color or a default primary color
- */
-export function getThemeColor(color?: string | null): string {
-	// Use the provided color, or default to a visible color
-	if (color && color !== 'null' && color !== '') {
-		return color;
-	}
-	// Default to a blue color (can't use CSS variables in SVG fill)
-	return '#3b82f6';
-}

static/themes/dots/item.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/bgbottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/bgtop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/item.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/waves/item.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>