wip: not loading themes until reload, missing in dashboard, bad alignment and scaling

src/lib/components/themes/ThemeBackground.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import TopPattern from './svgs/TopPattern.svelte';
+	import BottomPattern from './svgs/BottomPattern.svelte';
+	import { getTheme, getThemeColor } from '$lib/utils/themes';
+
+	let {
+		themeName,
+		color,
+		showTop = true,
+		showBottom = true
+	}: {
+		themeName?: string | null;
+		color?: string | null;
+		showTop?: boolean;
+		showBottom?: boolean;
+	} = $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}
+		/>
+	{/if}
+	{#if showBottom}
+		<BottomPattern
+			pattern={theme.pattern}
+			color={themeColor}
+			opacity={theme.opacity}
+		/>
+	{/if}
+{/if}