feat: add dark/light mode toggle

- Add blocking inline script in app.html that reads localStorage
  'theme' and applies .dark class before render (no flash)
- Invert gray scale in .dark via CSS custom properties so all
  grayscale colors reverse automatically (light becomes dark)
- Add @custom-variant dark to enable dark: utility classes
- Add border-button toggle ("Dark"/"Light") in TopBar far right
- Persist preference in localStorage

src/lib/components/ui/topBar/TopBar.svelte

@@ -1,28 +1,49 @@
 <script lang="ts">
 	import { authClient } from '$lib/auth-client';
 	import { canAccessAdmin } from '$lib/svelte-admin/roles';
+	import { onMount } from 'svelte';
 
 	let { userRoleId = null }: { userRoleId: number | null } = $props();
 	const session = authClient.useSession();
 	let isAdmin = $derived(canAccessAdmin(userRoleId));
+
+	let dark = $state(false);
+
+	onMount(() => {
+		dark = document.documentElement.classList.contains('dark');
+	});
+
+	function toggleTheme() {
+		dark = !dark;
+		if (dark) {
+			document.documentElement.classList.add('dark');
+			localStorage.setItem('theme', 'dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+			localStorage.setItem('theme', 'light');
+		}
+	}
 </script>
 
-<nav class="flex w-full justify-between px-8 py-6">
+<nav class="flex w-full items-center justify-between px-8 py-6">
 	<span><a href="/">Rhema Wave Technologies</a></span>
-	{#if $session.data}
-		<div>
+	<div class="flex items-center gap-4">
+		<button onclick={toggleTheme} class="border px-3 py-1 text-sm">
+			{dark ? 'Light' : 'Dark'}
+		</button>
+		{#if $session.data}
 			{#if isAdmin}
-				<a href="/admin" class="mx-2">Admin Panel</a>
+				<a href="/admin">Admin Panel</a>
 			{/if}
-			<a href="/dashboard" class="mx-2">Dashboard</a>
+			<a href="/dashboard">Dashboard</a>
 			<button
 				onclick={async () => {
 					await authClient.signOut();
 					window.location.href = '/';
 				}}>Log Out</button
 			>
-		</div>
-	{:else}
-		<span><a href="/login">Log In</a> | <a href="/register">Register</a></span>
-	{/if}
+		{:else}
+			<span><a href="/login">Log In</a> | <a href="/register">Register</a></span>
+		{/if}
+	</div>
 </nav>