💄 Added dark-mode

frontend/src/lib/navbar.svelte

@@ -1,7 +1,16 @@
-<script>
+<script lang="ts">
 	import '@fontsource/marck-script/index.css';
 	import { getLocalization } from '$lib/i18n';
 	import { signedIn, pathname } from '$lib/stores';
+	import { createTippy } from 'svelte-tippy';
+	import 'tippy.js/animations/perspective-subtle.css';
+	import 'tippy.js/dist/tippy.css';
+
+	const tippy = createTippy({
+		arrow: true,
+		animation: 'perspective-subtle',
+		placement: 'bottom'
+	});
 
 	const { t } = getLocalization();
 
@@ -13,6 +22,15 @@
 		closeMenu = !closeMenu;
 		menuItems = !menuItems;
 	};
+
+	const switchDarkMode = (on: boolean): void => {
+		if (on) {
+			localStorage.setItem('theme', 'dark');
+		} else {
+			localStorage.setItem('theme', 'light');
+		}
+		window.location.reload();
+	};
 </script>
 
 <nav
@@ -155,4 +173,52 @@
 			</li>
 		{/if}
 	</ul>
+	<div class="justify-self-end h-full flex justify-center items-center">
+		<button
+			class="dark:visible invisible"
+			on:click={() => {
+				switchDarkMode(false);
+			}}
+			use:tippy={{ content: 'Switch light mode on' }}
+		>
+			<!-- Heroicons: sun -->
+			<svg
+				class="w-6 h-6"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+				/>
+			</svg>
+		</button>
+		<button
+			class="dark:invisible visible"
+			on:click={() => {
+				switchDarkMode(true);
+			}}
+			use:tippy={{ content: 'Switch dark mode on' }}
+		>
+			<!-- Heroicons: moon -->
+			<svg
+				class="w-6 h-6"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+				/>
+			</svg>
+		</button>
+	</div>
 </nav>