add theme selector

app/src/hooks.server.ts

@@ -1,4 +1,5 @@
 import type { Handle } from '@sveltejs/kit';
+import { themes } from '$lib/themes'
 import { i18n } from '$lib/i18n';
 import { validateSessionToken, setSessionTokenCookie, deleteSessionTokenCookie } from "$lib/server/session";
 import { sequence } from "@sveltejs/kit/hooks";
@@ -29,4 +30,18 @@ const authHandle: Handle = async ({ event, resolve }) => {
     return resolve(event);
 };
 
-export const handle: Handle = sequence(handleParaglide, authHandle);
+const themeHandler: Handle = async ({ event, resolve }) => {
+	const theme = event.cookies.get('theme')
+
+	if (!theme || !themes.includes(theme)) {
+		return await resolve(event)
+	}
+
+	return await resolve(event, {
+		transformPageChunk: ({ html }) => {
+			return html.replace('data-theme=""', `data-theme="${theme}"`)
+		},
+	})
+}
+
+export const handle: Handle = sequence(handleParaglide, authHandle,themeHandler);

app/src/lib/theme-select.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { themes } from './themes';
+	import { theme, light, dark, coffee } from '$lib/paraglide/messages.js';
+
+	let current_theme = $state('');
+
+	const themeMessages = new Map<string, string>([
+		['light', light()],
+		['dark', dark()],
+		['coffee', coffee()],
+		['cyberpunk', 'Cyberpunk'],
+		['synthwave', 'Synthwave'],
+		['retro', 'Retro'],
+		['dracula', 'Dracula']
+	]);
+
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			const theme = window.localStorage.getItem('theme');
+			if (theme && themes.includes(theme)) {
+				document.documentElement.setAttribute('data-theme', theme);
+				current_theme = theme;
+			}
+		}
+	});
+
+	function set_theme(event: Event) {
+		const select = event.target as HTMLSelectElement;
+		const theme = select.value;
+		if (themes.includes(theme)) {
+			const one_year = 60 * 60 * 24 * 365;
+			window.localStorage.setItem('theme', theme);
+			document.cookie = `theme=${theme}; max-age=${one_year}; path=/; SameSite=Lax`;
+			document.documentElement.setAttribute('data-theme', theme);
+			current_theme = theme;
+		}
+	}
+</script>
+
+<div class="dropdown mb-8">
+	<select
+		bind:value={current_theme}
+		data-choose-theme
+		class="select"
+		onchange={set_theme}
+	>
+		<option value="" disabled={current_theme !== ''}>
+			{theme()}
+		</option>
+		{#each themes as theme}
+			<option
+				value={theme}
+				class="theme-controller capitalize"
+				>{themeMessages.get(theme)}</option
+			>
+		{/each}
+	</select>
+</div>

app/src/lib/themes.ts

@@ -0,0 +1 @@
+export const themes = ['light', 'dark','coffee', 'cyberpunk', 'synthwave', 'retro', 'dracula'];

app/src/routes/login/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-    import {sign_in,title} from '$lib/paraglide/messages.js';
+    import {sign_in,site_intro,title,family_tree} from '$lib/paraglide/messages.js';
     import Google from "./web_neutral_rd_SI.svg";
+    import FamilyTree from "./highresolution_icon_no_background_croped.png";
+    import ThemeButton from '$lib/theme-select.svelte';
 </script>
 
 <svelte:head>
@@ -10,14 +12,23 @@
 <div class="hero bg-base-200 min-h-screen">
     <div class="hero-content flex flex-col items-center justify-center text-center">
       <div class="max-w-md">
+        <figure class="px-10 pt-10 top-margin-10">
+          <img
+            src="{FamilyTree}"
+            alt="{family_tree()}"
+            class="rounded-xl" />
+        </figure>
         <h1 class="text-5xl font-bold">{sign_in()}</h1>
         <p class="py-6">
-          Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
-          quasi. In deleniti eaque aut repudiandae et a id nisi.
+          {site_intro()}
         </p>
         <a href="/login/google" class="inline-block">
           <img src="{Google}" alt="{sign_in()}" class="w-full h-auto">
         </a>
       </div>
     </div>
+</div>
+
+<div class="absolute top-2 right-2">
+  <ThemeButton />
 </div>