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

src/lib/components/themes/ThemeCard.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import CardPattern from './svgs/CardPattern.svelte';
+	import { getTheme, getThemeColor } from '$lib/utils/themes';
+
+	let {
+		themeName,
+		color
+	}: {
+		themeName?: string | null;
+		color?: string | null;
+	} = $props();
+
+	const theme = $derived(getTheme(themeName));
+	const themeColor = $derived(getThemeColor(color));
+</script>
+
+{#if theme.pattern !== 'none'}
+	<CardPattern
+		pattern={theme.pattern}
+		color={themeColor}
+		opacity={theme.opacity}
+	/>
+{/if}