diff --git a/src/lib/components/themes/ThemeBackground.svelte b/src/lib/components/themes/ThemeBackground.svelte
index f983a58..4353fea 100644
--- a/src/lib/components/themes/ThemeBackground.svelte
+++ b/src/lib/components/themes/ThemeBackground.svelte
@@ -1,37 +1,38 @@
{#if theme.pattern !== 'none'}
{#if showTop}
{/if}
{#if showBottom}
{/if}
{/if}
diff --git a/src/lib/components/themes/ThemeCard.svelte b/src/lib/components/themes/ThemeCard.svelte
index 0a3c685..ca09aa3 100644
--- a/src/lib/components/themes/ThemeCard.svelte
+++ b/src/lib/components/themes/ThemeCard.svelte
@@ -1,23 +1,23 @@
{#if theme.pattern !== 'none'}
{/if}
diff --git a/src/lib/components/themes/svgs/CardPattern.svelte b/src/lib/components/themes/svgs/CardPattern.svelte
index 6c00a8c..1ee075e 100644
--- a/src/lib/components/themes/svgs/CardPattern.svelte
+++ b/src/lib/components/themes/svgs/CardPattern.svelte
@@ -1,38 +1,14 @@
-
- {#if pattern === 'waves'}
-
- {:else if pattern === 'geometric'}
-
- {:else if pattern === 'dots'}
-
- {/if}
+
+
diff --git a/src/lib/components/themes/svgs/TopPattern.svelte b/src/lib/components/themes/svgs/TopPattern.svelte
index 3aa0247..543702b 100644
--- a/src/lib/components/themes/svgs/TopPattern.svelte
+++ b/src/lib/components/themes/svgs/TopPattern.svelte
@@ -1,38 +1,45 @@
-
- {#if pattern === 'waves'}
-
- {:else if pattern === 'geometric'}
-
- {:else if pattern === 'dots'}
-
- {/if}
+
+ {@html svgContent}
diff --git a/src/lib/components/wishlist/WishlistHeader.svelte b/src/lib/components/wishlist/WishlistHeader.svelte
index f0f0c89..6381bde 100644
--- a/src/lib/components/wishlist/WishlistHeader.svelte
+++ b/src/lib/components/wishlist/WishlistHeader.svelte
@@ -106,7 +106,7 @@
editingTitle = true;
}
}}
- class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
+ class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
aria-label={editingTitle ? "Save title" : "Edit title"}
>
{#if editingTitle}
@@ -116,12 +116,12 @@
{/if}
-
+
{
wishlistTheme = theme;
- await onThemeUpdate(theme);
+ onThemeUpdate(theme);
// Force reactivity by updating the wishlist object
wishlist.theme = theme;
}}
diff --git a/src/lib/stores/theme.svelte.ts b/src/lib/stores/theme.svelte.ts
index 85cf553..9a6da49 100644
--- a/src/lib/stores/theme.svelte.ts
+++ b/src/lib/stores/theme.svelte.ts
@@ -1,6 +1,7 @@
import { browser } from '$app/environment';
type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
class ThemeStore {
current = $state('system');
@@ -35,6 +36,12 @@ class ThemeStore {
}
}
+ getResolvedTheme(): ResolvedTheme {
+ const isDark = this.current === 'dark' ||
+ (this.current === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+ return isDark ? 'dark' : 'light';
+ }
+
toggle() {
// Cycle through: light -> dark -> system -> light
if (this.current === 'light') {
diff --git a/src/lib/utils/themes.ts b/src/lib/utils/themes.ts
index c8c2ed6..49af6ca 100644
--- a/src/lib/utils/themes.ts
+++ b/src/lib/utils/themes.ts
@@ -7,29 +7,24 @@ export type ThemePattern = 'waves' | 'geometric' | 'dots' | 'none';
export interface Theme {
name: string;
pattern: ThemePattern;
- opacity: number;
}
export const AVAILABLE_THEMES: Record = {
none: {
name: 'None',
pattern: 'none',
- opacity: 0
},
waves: {
name: 'Waves',
pattern: 'waves',
- opacity: 0.1
},
geometric: {
name: 'Geometric',
pattern: 'geometric',
- opacity: 0.1
},
dots: {
name: 'Dots',
pattern: 'dots',
- opacity: 0.15
}
};
@@ -41,16 +36,3 @@ export function getTheme(themeName?: string | null): Theme {
}
return AVAILABLE_THEMES[themeName];
}
-
-/**
- * Get color from a CSS color string or class
- * Returns the provided color or a default primary color
- */
-export function getThemeColor(color?: string | null): string {
- // Use the provided color, or default to a visible color
- if (color && color !== 'null' && color !== '') {
- return color;
- }
- // Default to a blue color (can't use CSS variables in SVG fill)
- return '#3b82f6';
-}
diff --git a/static/themes/dots/item.svg b/static/themes/dots/item.svg
new file mode 100644
index 0000000..455daf8
--- /dev/null
+++ b/static/themes/dots/item.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/themes/geometric/bgbottom.svg b/static/themes/geometric/bgbottom.svg
new file mode 100644
index 0000000..455daf8
--- /dev/null
+++ b/static/themes/geometric/bgbottom.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/themes/geometric/bgtop.svg b/static/themes/geometric/bgtop.svg
new file mode 100644
index 0000000..455daf8
--- /dev/null
+++ b/static/themes/geometric/bgtop.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/themes/geometric/item.svg b/static/themes/geometric/item.svg
new file mode 100644
index 0000000..455daf8
--- /dev/null
+++ b/static/themes/geometric/item.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/themes/waves/item.svg b/static/themes/waves/item.svg
new file mode 100644
index 0000000..455daf8
--- /dev/null
+++ b/static/themes/waves/item.svg
@@ -0,0 +1 @@
+
\ No newline at end of file