add: dynamic themes and streamlined theme creation system

src/lib/components/themes/ThemeCard.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import CardPattern from './svgs/CardPattern.svelte';
-	import { getTheme } from '$lib/utils/themes';
-
-	const patternOpacity = 0.1;
+	import { getTheme, getPatternColor, PATTERN_OPACITY } from '$lib/utils/themes';
 
 	let {
 		themeName,
@@ -13,11 +11,9 @@
 	} = $props();
 
 	const theme = $derived(getTheme(themeName));
+	const patternColor = $derived(getPatternColor(color));
 </script>
 
 {#if theme.pattern !== 'none'}
-	<CardPattern
-		pattern={theme.pattern}
-		opacity={patternOpacity}
-	/>
+	<CardPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
 {/if}