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}
-			opacity={theme.opacity}
+			color={color}
+			opacity={patternOpacity}
 		/>
 	{/if}
 	{#if showBottom}
 		<BottomPattern
 			pattern={theme.pattern}
-			color={themeColor}
-			opacity={theme.opacity}
+			color={color}
+			opacity={patternOpacity}
 		/>
 	{/if}
 {/if}