add: dynamic themes and streamlined theme creation system

src/lib/components/themes/ThemeBackground.svelte

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