🚸 Improved dark-mode toggle

frontend/src/lib/navbar.svelte

@@ -5,6 +5,7 @@
 	import { createTippy } from 'svelte-tippy';
 	import 'tippy.js/animations/perspective-subtle.css';
 	import 'tippy.js/dist/tippy.css';
+	import { browser } from '$app/env';
 
 	const tippy = createTippy({
 		arrow: true,
@@ -22,6 +23,13 @@
 		closeMenu = !closeMenu;
 		menuItems = !menuItems;
 	};
+	let darkMode = false;
+	if (browser) {
+		darkMode =
+			localStorage.theme === 'dark' ||
+			(!('theme' in localStorage) &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches);
+	}
 
 	const switchDarkMode = (on: boolean): void => {
 		if (on) {
@@ -34,7 +42,7 @@
 </script>
 
 <nav
-	class="w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-sm bg-white/60 shadow-md z-50 top-0"
+	class="w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-2xl bg-white/70 shadow-md z-50 top-0"
 >
 	<section class="w-full lg:w-max flex justify-between">
 		<a href="/" class="font-black tracking-tight text-xl text-black marck-script link-hover"
@@ -173,52 +181,55 @@
 			</li>
 		{/if}
 	</ul>
-	<div class="justify-self-end h-full flex justify-center items-center">
+	<div
-		<button
+		class="justify-self-end h-full flex justify-center items-center lg:relative fixed right-12 -top-1/2 pt-11 lg:right-0 lg:top-0 lg:p-0"
-			class="dark:visible invisible"
+	>
-			on:click={() => {
+		{#if darkMode}
-				switchDarkMode(false);
+			<button
-			}}
+				on:click={() => {
-			use:tippy={{ content: 'Switch light mode on' }}
+					switchDarkMode(false);
-		>
+				}}
-			<!-- Heroicons: sun -->
+				use:tippy={{ content: 'Switch light mode on' }}
-			<svg
-				class="w-6 h-6"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<path
+				<!-- Heroicons: sun -->
-					stroke-linecap="round"
+				<svg
-					stroke-linejoin="round"
+					class="w-6 h-6"
-					stroke-width="2"
+					fill="none"
-					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"
+					stroke="currentColor"
-				/>
+					viewBox="0 0 24 24"
-			</svg>
+					xmlns="http://www.w3.org/2000/svg"
-		</button>
+				>
-		<button
+					<path
-			class="dark:invisible visible"
+						stroke-linecap="round"
-			on:click={() => {
+						stroke-linejoin="round"
-				switchDarkMode(true);
+						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"
-			use:tippy={{ content: 'Switch dark mode on' }}
+					/>
-		>
+				</svg>
-			<!-- Heroicons: moon -->
+			</button>
-			<svg
+		{:else}
-				class="w-6 h-6"
+			<button
-				fill="none"
+				on:click={() => {
-				stroke="currentColor"
+					switchDarkMode(true);
-				viewBox="0 0 24 24"
+				}}
-				xmlns="http://www.w3.org/2000/svg"
+				use:tippy={{ content: 'Switch dark mode on' }}
 			>
-				<path
+				<!-- Heroicons: moon -->
-					stroke-linecap="round"
+				<svg
-					stroke-linejoin="round"
+					class="w-6 h-6"
-					stroke-width="2"
+					fill="none"
-					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"
+					stroke="currentColor"
-				/>
+					viewBox="0 0 24 24"
-			</svg>
+					xmlns="http://www.w3.org/2000/svg"
-		</button>
+				>
+					<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>
+		{/if}
 	</div>
 </nav>

frontend/src/routes/index.svelte

@@ -63,27 +63,23 @@
 </svelte:head>
 
 <div class="min-h-screen flex flex-col">
-	<section>
+	<section class="pb-40">
 		<div class="pt-12 text-center">
 			<h1 class="sm:text-8xl text-6xl mt-6 marck-script">ClassQuiz</h1>
 			<p class="text-xl mt-4">{$t('index_page.slogan')}</p>
 		</div>
 	</section>
 
-	<section id="stats">
+	<section id="features" class="mt-8">
-		<div class="text-center pt-48 snap-y">
+		<div class="text-center snap-y">
-			<h1 class="sm:text-6xl text-4xl">{$t('words.stats')}</h1>
+			<h1 class="sm:text-6xl text-4xl">{$t('words.features')}</h1>
 			<p class="text-xl pt-4">
-				{#await getStats() then stats}
+				{$t('index_page.features_description.1')}
-					{$t('index_page.stats', {
+				<br />
-						user_count: stats.user_count,
+				{$t('index_page.features_description.2')}
-						quiz_count: stats.quiz_count
-					})}
-				{/await}
 			</p>
 		</div>
 	</section>
-
 	<section class="py-8">
 		<h1 class="sm:text-6xl text-4xl text-center">{$t('words.screenshot', { count: 2 })}</h1>
 		<div>
@@ -97,13 +93,17 @@
 			<svelte:component this={testimonials.default} />
 		{/await}
 	</section>
-	<section id="features" class="mt-8">
+
-		<div class="text-center snap-y">
+	<section id="stats">
-			<h1 class="sm:text-6xl text-4xl">{$t('words.features')}</h1>
+		<div class="text-center pb-20 pt-10 snap-y">
+			<h1 class="sm:text-6xl text-4xl">{$t('words.stats')}</h1>
 			<p class="text-xl pt-4">
-				{$t('index_page.features_description.1')}
+				{#await getStats() then stats}
-				<br />
+					{$t('index_page.stats', {
-				{$t('index_page.features_description.2')}
+						user_count: stats.user_count,
+						quiz_count: stats.quiz_count
+					})}
+				{/await}
 			</p>
 		</div>
 	</section>