Modify some lib components for Svelte 5

src/lib/components/Button.svelte

@@ -1,6 +1,12 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
-	export let text: string;
-	export let action: any = () => {};
+	import UserSettingsStore from '$lib/stores/UserSettingsStore';
+	import { themes } from '$lib/types/themes';
+
+	let {children, onclick} = $props()
+
+	let themeId = $derived($UserSettingsStore.themeId)
 </script>
 
-<button class="btn px-4 py-2 mx-2 rounded-token variant-ringed-primary hover:variant-filled-primary active:variant-filled-primary" on:click={action}>{text}</button>
+<button {onclick} class="border-2 border-{themes[themeId].primaryAction} hover:border-{themes[themeId].secondaryAction}">{@render children()}</button>

src/lib/components/NavigationElement.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	let {href} = $props()
+	// {$page.url.pathname === '/'}
+</script>
+
+<li>
+	<a {href}><slot /></a>
+</li>

src/lib/stores/UserSettingsStore.ts

@@ -0,0 +1,6 @@
+import { writable, type Writable } from "svelte/store";
+import { UserSettings } from '$lib/types/userSettings';
+
+const UserSettingsStore: Writable<UserSettings> = writable(new UserSettings());
+
+export default UserSettingsStore;

src/lib/types/themes.ts

@@ -0,0 +1,27 @@
+export type Theme = {
+	backgroundColor: string,
+	textColor: string,
+	primaryAction: string,
+	secondaryAction: string,
+}
+const lightTheme = {
+	backgroundColor: "slate-50",
+	textColor:  "slate-950",
+	primaryAction: "sky-300",
+	secondaryAction: "sky-600",
+}
+
+const darkTheme = {
+	backgroundColor: "slate-950",
+	textColor: "slate-50",
+	primaryAction: "sky-300",
+	secondaryAction: "sky-600",
+}
+
+export const themes = [
+	lightTheme,
+	darkTheme
+]
+
+
+

src/lib/types/userSettings.ts

@@ -0,0 +1,8 @@
+export class UserSettings {
+	themeId: number
+
+	constructor() {
+		this.themeId = 1 // DEBUG
+		return this
+	}
+}