add: dynamic themes and streamlined theme creation system

src/lib/utils/themes.ts

@@ -1,6 +1,4 @@
-/**
- * Theme configuration for SVG overlays
- */
+import { themeStore } from '$lib/stores/theme.svelte';
 
 export type ThemePattern = 'waves' | 'geometric' | 'dots' | 'none';
 
@@ -12,23 +10,24 @@ export interface Theme {
 export const AVAILABLE_THEMES: Record<string, Theme> = {
 	none: {
 		name: 'None',
-		pattern: 'none',
+		pattern: 'none'
 	},
 	waves: {
 		name: 'Waves',
-		pattern: 'waves',
+		pattern: 'waves'
 	},
 	geometric: {
 		name: 'Geometric',
-		pattern: 'geometric',
+		pattern: 'geometric'
 	},
 	dots: {
 		name: 'Dots',
-		pattern: 'dots',
+		pattern: 'dots'
 	}
 };
 
 export const DEFAULT_THEME = 'none';
+export const PATTERN_OPACITY = 0.1;
 
 export function getTheme(themeName?: string | null): Theme {
 	if (!themeName || !AVAILABLE_THEMES[themeName]) {
@@ -36,3 +35,7 @@ export function getTheme(themeName?: string | null): Theme {
 	}
 	return AVAILABLE_THEMES[themeName];
 }
+
+export function getPatternColor(customColor?: string): string {
+	return customColor || (themeStore.getResolvedTheme() === 'dark' ? '#FFFFFF' : '#000000');
+}