add theme change + high res icon

app/messages/en.json

@@ -19,6 +19,7 @@
 	"child": "Child",
 	"citizenship": "Citizenship",
 	"close": "Close",
+	"coffee": "Coffee",
 	"colour": "Colour",
 	"connection": "Connection",
 	"connection_type": "Connection Type",
@@ -104,6 +105,7 @@
 	"sibling": "Sibling",
 	"sign_in": "Sign In",
 	"sign_out": "Sign Out",
+	"site_intro": "Welcome to Generations Heritage, a place to record and share your family history.",
 	"skill": "Skill",
 	"skin_colour": "Skin Colour",
 	"source": "Source",

app/messages/hu.json

@@ -19,6 +19,7 @@
     "child": "Gyermek",
     "citizenship": "Állampolgárság",
     "close": "Bezár",
+    "coffee": "Kávé",
     "colour": "Szín",
     "connection": "Kapcsolat",
     "connection_type": "Kapcsolat típusa",
@@ -104,6 +105,7 @@
     "sibling": "Testvér",
     "sign_in": "Bejelentkezés",
     "sign_out": "Kijelentkezés",
+    "site_intro": "Üdvözöljük a Generációk Öröksége oldalán, ahol rögzítheti és megoszthatja családtörténetét.",
     "skill": "Képesség",
     "skin_colour": "Bőrszín",
     "source": "Forrás",

app/src/routes/+page.svelte

@@ -2,6 +2,7 @@
     import {title, family_tree} from '$lib/paraglide/messages.js';
     import { SvelteFlowProvider,Background, BackgroundVariant, SvelteFlow, Controls, MiniMap } from '@xyflow/svelte';
     import type { Node, Edge, NodeTypes, NodeProps } from '@xyflow/svelte';
+	import ThemeButton from '$lib/theme-select.svelte';
 
     let nodes = $state.raw<Node[]>([]);
     let edges = $state.raw<Edge[]>([]);
@@ -11,6 +12,10 @@
 	<title>{title({ page: family_tree() })}</title>
 </svelte:head>
 
+<div class="absolute top-2 right-2">
+    <ThemeButton />
+</div>
+
 <div style="height:100vh;">
 	<SvelteFlowProvider>
 		<SvelteFlow bind:nodes bind:edges class="bg-base-100" fitView onlyRenderVisibleElements>