add: dynamic themes and streamlined theme creation system

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

@@ -1,14 +1,33 @@
 <script lang="ts">
 	import { asset } from '$app/paths';
+
 	let {
-		pattern = 'none'
+		pattern = 'none',
+		color = '#000000',
+		opacity = 0.1
 	}: {
 		pattern?: string;
+		color?: string;
+		opacity?: number;
 	} = $props();
-	const patternPath = `/themes/${pattern}/item.svg`;
-	const patternOpacity = 0.2;
+
+	const patternPath = $derived(asset(`/themes/${pattern}/item.svg`));
 </script>
 
-<div class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg" style="opacity: {patternOpacity};">
-	<img alt="card svg background pattern" src={asset(patternPath)}>
-</div>
+{#if pattern !== 'none'}
+	<div
+		class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
+		style="
+			mask-image: url({patternPath});
+			-webkit-mask-image: url({patternPath});
+			mask-size: cover;
+			-webkit-mask-size: cover;
+			mask-repeat: repeat;
+			-webkit-mask-repeat: repeat;
+			background-color: {color};
+			opacity: {opacity};
+			width: 200px;
+			height: 200px;
+		"
+	/>
+{/if}