src/lib/theme.ts

@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store'
+import { writable, get } from 'svelte/store'
 import { browser } from "$app/environment"
 
 type Theme = 'tokiwa' | 'star'
@@ -11,3 +11,11 @@ export const theme = writable(userTheme ?? 'tokiwa')
 export function setTheme(newTheme: Theme) {
 	theme.set(newTheme)
 }
+
+export function getThemeObject(key: string, obj: { [key in Theme]: string } | string) {
+	if (typeof obj === 'object') {
+		return obj[key];
+	} else {
+		return obj;
+	}
+}

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { derived } from 'svelte/store'
 	import { routes } from "$lib/sitemap.ts"
 	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { theme, getThemeObject } from '$lib/theme'
 	import { Rss } from "lucide-svelte";
 	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	let scrollPosition: number = .5;
@@ -38,6 +40,11 @@
 	};
 	const iconLinks: [string, string][] = Object.entries(metadata.links).map(
 		([key, link]) => [iconMap[key], link]);
+
+	const frontCover = derived(
+		theme,
+		($theme) => getThemeObject($theme, metadata.frontCover)
+	)
 </script>
 
 <svelte:head>
@@ -46,7 +53,7 @@
 
 <div
 	id="background"
-	style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
+	style="opacity: {1 - progress}; background-image: url('{$frontCover}')"
 >
 </div>