add: snow theme

src/lib/components/themes/svgs/BottomPattern.svelte

@@ -16,17 +16,15 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="absolute bottom-0 left-0 right-0 pointer-events-none overflow-hidden"
+		class="fixed bottom-0 left-0 right-0 pointer-events-none overflow-hidden z-0"
 		style="
 			mask-image: url({patternPath});
-			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			-webkit-mask-size: cover;
-			mask-repeat: repeat;
-			-webkit-mask-repeat: repeat;
+			mask-repeat: no-repeat;
+			mask-position: left bottom;
 			background-color: {color};
 			opacity: {opacity};
-			height: 200px;
+			height: 100vh;
 		"
 	/>
 {/if}

src/lib/components/themes/svgs/CardPattern.svelte

@@ -16,18 +16,15 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
+		class="absolute bottom-0 top-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
 		style="
 			mask-image: url({patternPath});
-			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			-webkit-mask-size: cover;
-			mask-repeat: repeat;
-			-webkit-mask-repeat: repeat;
+			mask-repeat: no-repeat;
+			mask-position: right bottom;
 			background-color: {color};
 			opacity: {opacity};
-			width: 200px;
-			height: 200px;
+			width: 100%;
 		"
 	/>
 {/if}

src/lib/components/themes/svgs/TopPattern.svelte

@@ -16,17 +16,16 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="absolute top-0 left-0 right-0 pointer-events-none overflow-hidden"
+		class="fixed top-0 right-0 left-0 pointer-events-none z-0"
 		style="
 			mask-image: url({patternPath});
 			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			-webkit-mask-size: cover;
-			mask-repeat: repeat;
-			-webkit-mask-repeat: repeat;
+			mask-repeat: no-repeat;
+			mask-position: right top;
 			background-color: {color};
 			opacity: {opacity};
-			height: 200px;
+			height: 100vh;
 		"
 	/>
 {/if}

src/lib/utils/themes.ts

@@ -1,6 +1,6 @@
 import { themeStore } from '$lib/stores/theme.svelte';
 
-export type ThemePattern = 'waves' | 'geometric' | 'dots' | 'none';
+export type ThemePattern = 'snow' | 'none';
 
 export interface Theme {
 	name: string;
@@ -13,16 +13,8 @@ export const AVAILABLE_THEMES: Record<string, Theme> = {
 		pattern: 'none'
 	},
 	waves: {
-		name: 'Waves',
-		pattern: 'waves'
-	},
-	geometric: {
-		name: 'Geometric',
-		pattern: 'geometric'
-	},
-	dots: {
-		name: 'Dots',
-		pattern: 'dots'
+		name: 'Snow',
+		pattern: 'snow'
 	}
 };