💄 Added dark-mode

frontend/pnpm-lock.yaml

@@ -62,9 +62,9 @@ devDependencies:
     '@fontsource/marck-script': 4.5.5
     '@sentry/browser': 6.19.6
     '@sentry/tracing': 6.19.6
-    '@sveltejs/adapter-auto': 1.0.0-next.38
+    '@sveltejs/adapter-auto': 1.0.0-next.40
     '@sveltejs/adapter-node': 1.0.0-next.73
-    '@sveltejs/kit': 1.0.0-next.320_sass@1.50.0+svelte@3.47.0
+    '@sveltejs/kit': 1.0.0-next.325_sass@1.50.0+svelte@3.47.0
     '@tailwindcss/typography': 0.5.2_tailwindcss@3.0.24
     '@types/cookie': 0.5.0
     '@types/js-cookie': 3.0.1
@@ -438,31 +438,31 @@ packages:
             }
         dev: true
 
-    /@sveltejs/adapter-auto/1.0.0-next.38:
+    /@sveltejs/adapter-auto/1.0.0-next.40:
         resolution:
             {
-                integrity: sha512-1//aiV/Wzebj+j5X8VLRs0vJUT3andc/0+IRQwy5ykOwjpNo5/Mj2RX8SA+t5nxBFYyJJf2kj6sszKA8LjRAQQ==
+                integrity: sha512-TT6YJUF3asJ/2RbviEpcDJQ/TixPcvmH0L2266fGNT7+KfAf9wbbVdegPWRODk2E2hTN0X+h5YS9l+lap+BK9w==
             }
         dependencies:
-            '@sveltejs/adapter-cloudflare': 1.0.0-next.18
+            '@sveltejs/adapter-cloudflare': 1.0.0-next.19
-            '@sveltejs/adapter-netlify': 1.0.0-next.55
+            '@sveltejs/adapter-netlify': 1.0.0-next.56
-            '@sveltejs/adapter-vercel': 1.0.0-next.49
+            '@sveltejs/adapter-vercel': 1.0.0-next.50
         dev: true
 
-    /@sveltejs/adapter-cloudflare/1.0.0-next.18:
+    /@sveltejs/adapter-cloudflare/1.0.0-next.19:
         resolution:
             {
-                integrity: sha512-iIb7ScN2hnnfVQPhRjw0FYpovYJrw4n22BFAQIg6QvOwmmGz1E3QkyBkm/tRmyY7emDfnljgXtvk4Hsoszp5Ug==
+                integrity: sha512-LET3DUYpl+deoKhkWCzhHUT7iipYkgVkOcRIJX7qT4m23A+MAbzcAC3npgwEYSe9RokOSWMVBr3tVujeES5EeA==
             }
         dependencies:
             esbuild: 0.14.36
-            worktop: 0.8.0-next.12
+            worktop: 0.8.0-next.13
         dev: true
 
-    /@sveltejs/adapter-netlify/1.0.0-next.55:
+    /@sveltejs/adapter-netlify/1.0.0-next.56:
         resolution:
             {
-                integrity: sha512-LbqupuX8SdvUdCLSLiazPdU+JwwVhWGmoAopwlFkdlGOsGEag6jB+CjEYPmy81SVMSKxtYA2RqNzBPpPbURDtw==
+                integrity: sha512-fM3aBHsr7syCGfIJcuB1mEoZwynqyOxVijvmyrd9OWHi6MP3bXSP+GhKDMtDpQRwejJJiwuZNTx2PUbV3uirvA==
             }
         dependencies:
             '@iarna/toml': 2.2.5
@@ -479,19 +479,19 @@ packages:
             tiny-glob: 0.2.9
         dev: true
 
-    /@sveltejs/adapter-vercel/1.0.0-next.49:
+    /@sveltejs/adapter-vercel/1.0.0-next.50:
         resolution:
             {
-                integrity: sha512-Me0Zb10iBv+ySVMc0XgI7rdzwiMmeVHq48iVv3oXORa/et/efJVEknVSVk22q15XRqys7DhoPirf54Mz4jElFQ==
+                integrity: sha512-yta0AkuWEr7qrm8LB34F4ZdCtMxj+cHD4huwrRYCgjv+PSJHLPwe7aH53+Mhrv6La0TgeyQ/f2lTyhBMXZXn9Q==
             }
         dependencies:
             esbuild: 0.14.36
         dev: true
 
-    /@sveltejs/kit/1.0.0-next.320_sass@1.50.0+svelte@3.47.0:
+    /@sveltejs/kit/1.0.0-next.325_sass@1.50.0+svelte@3.47.0:
         resolution:
             {
-                integrity: sha512-BDgF+gd73Gxls65rb3H2oacdQUrK8fM0X174t2kMfGS+MeNN6oZ+Kw+j0IJMzMaZSGco89+/wkPeArvDzM/2MQ==
+                integrity: sha512-ED+wJR/eYdLGwvELP8aeMtkSpYsr8jGAyno9vcV2DLQv8F0i5nRq/xtO1820mSSqjp+YU2QMuvWQIzF4ERwGsw==
             }
         engines: { node: '>=14.13' }
         hasBin: true
@@ -4041,10 +4041,10 @@ packages:
         engines: { node: '>=0.10.0' }
         dev: true
 
-    /worktop/0.8.0-next.12:
+    /worktop/0.8.0-next.13:
         resolution:
             {
-                integrity: sha512-ZXdgI9XOf0uB4IegFoViLdQ0Bf7hish0XMHwuV3nopOXygfLJkwAC5+HyA+sihBMSM2sLLQ5uGnD5aknL8+NQg==
+                integrity: sha512-aLPWSneFtPJr3RAf841orF9GNlVdVkQd2Wj/BbcGHp3whBZoXx6dcwwClA9fezm7muNan4SuT+ZTyMWdoJSCAg==
             }
         engines: { node: '>=12' }
         dependencies:

frontend/src/lib/collapsible.svelte

@@ -4,28 +4,27 @@
 	let expanded = false;
 </script>
 
-<div class="collapsible">
+<div>
-	<h3>
+	<h3 class="bg-white dark:bg-slate-800 m-0">
-		<button aria-expanded={expanded} on:click={() => (expanded = !expanded)}
+		<button
+			aria-expanded={expanded}
+			on:click={() => (expanded = !expanded)}
+			class="bg-white dark:bg-slate-800 flex justify-between w-full border-none m-0 p-2"
 			>{headerText}
-			<svg viewBox="0 0 20 20" fill="none">
+			<svg viewBox="0 0 20 20" fill="none" class="my-auto">
 				<path class="vert" d="M10 1V19" stroke="black" stroke-width="2" />
 				<path d="M1 10L19 10" stroke="black" stroke-width="2" />
 			</svg>
 		</button>
 	</h3>
 
-	<div class="contents" class:hidden={!expanded}>
+	<div class="border-b-1 border-gray-500" class:hidden={!expanded}>
 		<slot />
 	</div>
 </div>
 
 <style>
-	.collapsible {
+	/*	h3 {
-		border-bottom: 1px solid var(--gray-light, #eee);
-	}
-
-	h3 {
 		margin: 0;
 	}
 
@@ -38,6 +37,8 @@
 		border: none;
 		margin: 0;
 		padding: 1em 0.5em;
+	}*/
+	button {
 	}
 
 	button[aria-expanded='true'] {

frontend/src/lib/editor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getLocalization } from '$lib/i18n';
 	import * as yup from 'yup';
-	import { dataSchema } from '$lib/jupSchemas';
+	import { dataSchema } from '$lib/yupSchemas';
 
 	const { t } = getLocalization();
 
@@ -89,7 +89,7 @@
 		type="text"
 		placeholder={$t('words.title')}
 		bind:value={data.title}
-		class="text-black bg-inherit border-dotted border-b-2 border-black w-full"
+		class="text-black bg-inherit border-dotted border-b-2 border-black w-full dark:text-gray-200"
 		class:border-red-600={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
 		class:border-solid={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
 		class:border-2={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
@@ -100,7 +100,7 @@
 	<textarea
 		placeholder={$t('words.description')}
 		bind:value={data.description}
-		class="text-black w-full"
+		class="text-black w-full dark:text-gray-200 dark:bg-gray-800 rounded-lg p-1"
 		class:border-red-600={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
 		class:border-solid={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
 		class:border-2={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
@@ -116,7 +116,7 @@
 				type="text"
 				placeholder={$t('words.question')}
 				bind:value={question.question}
-				class="text-black w-full bg-inherit border-dotted border-b-2 border-black"
+				class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
 				class:border-red-600={!yup
 					.reach(dataSchema, 'questions[].question')
 					.isValidSync(question.question)}
@@ -134,7 +134,7 @@
 				type="text"
 				placeholder="https://i.imgur.com/kSPCidY.png"
 				bind:value={question.image}
-				class="text-black w-full bg-inherit border-dotted border-b-2 border-black"
+				class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
 				class:border-red-600={!yup
 					.reach(dataSchema, 'questions[].image')
 					.isValidSync(question.image)}
@@ -152,7 +152,7 @@
 				type="text"
 				placeholder="20"
 				bind:value={question.time}
-				class="text-black w-full bg-inherit border-dotted border-b-2 border-black"
+				class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
 				class:border-red-600={!yup
 					.reach(dataSchema, 'questions[].time')
 					.isValidSync(question.time)}
@@ -177,7 +177,7 @@
 						type="text"
 						placeholder={$t('words.answer')}
 						bind:value={data.questions[index_question].answers[index_answer].answer}
-						class="text-black w-full bg-inherit border-dotted border-b-2 border-black"
+						class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
 						class:border-red-600={!yup
 							.reach(dataSchema, 'questions[].answers[].answer')
 							.isValidSync(
@@ -196,7 +196,11 @@
 					/>
 				</label>
 				<label class="m-1 flex flex-row gap-2 w-2/6 flex-nowrap whitespace-nowrap">
-					<input type="checkbox" bind:checked={answer.right} class="text-black w-fit" />
+					<input
+						type="checkbox"
+						bind:checked={answer.right}
+						class="text-black w-fit dark:text-gray-200"
+					/>
 					<span class="w-fit">{$t('editor.right_or_true?')}</span>
 				</label>
 

frontend/src/lib/landing/testimonials.svelte

@@ -32,13 +32,15 @@ I like it and would use it for my house parties next time!`,
 						<div class="max-w-3xl p-4 text-gray-800 rounded-lg text-white">
 							<div class="mb-2">
 								<div class="h-3 text-3xl text-left text-indigo-600">“</div>
-								<p class="px-4 text-center text-gray-800 font-medium">
+								<p
+									class="px-4 text-center text-gray-800 font-medium dark:text-gray-300"
+								>
 									{@html testi.quote}
 								</p>
 								<div class="h-3 text-3xl text-right text-indigo-600">”</div>
 								<div class="text-center">
 									<h5 class="font-bold text-indigo-600">{testi.name}</h5>
-									<a class="text-sm text-gray-600" href={testi.source}>Source</a>
+									<a class="text-sm text-gray-500" href={testi.source}>Source</a>
 								</div>
 							</div>
 						</div>

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>

frontend/src/routes/__layout.svelte

@@ -20,6 +20,24 @@
 
 	if (browser) {
 		pathname.set(window.location.pathname);
+		if (
+			localStorage.theme === 'dark' ||
+			(!('theme' in localStorage) &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches)
+		) {
+			document.documentElement.classList.add('dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+		}
+
+		// Whenever the user explicitly chooses light mode
+		// 		localStorage.theme = 'light';
+		//
+		// // Whenever the user explicitly chooses dark mode
+		// 		localStorage.theme = 'dark';
+		//
+		// // Whenever the user explicitly chooses to respect the OS preference
+		// 		localStorage.removeItem('theme');
 	}
 
 	initLocalizationContext();
@@ -48,9 +66,10 @@
 {/if}
 
 <style lang="scss">
-	:global(body) {
+	:global(html:not(.dark)) {
 		// height: 100%;
 		// width: 100%;
+
 		background: linear-gradient(to right, #009444, #39b54a, #8dc63f) repeat-y;
 		background-size: cover;
 		/*background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); */
@@ -62,6 +81,12 @@
 		//animation: background_animation 5s ease infinite;
 	}
 
+	:global(html.dark) {
+		background-color: #0f2702;
+		background-size: cover;
+		color: white;
+	}
+
 	@keyframes background_animation {
 		0% {
 			background-position: 0% 50%;

frontend/src/routes/create.svelte

@@ -32,7 +32,7 @@
 	import Editor from '$lib/editor.svelte';
 	import { getLocalization } from '$lib/i18n';
 	import { navbarVisible } from '$lib/stores';
-	import { dataSchema } from '$lib/jupSchemas';
+	import { dataSchema } from '$lib/yupSchemas';
 
 	navbarVisible.set(true);
 

frontend/src/routes/docs/attribution.svelte

@@ -3,7 +3,7 @@
 	<meta name="description" content="People who helped make with ClassQuiz." />
 </svelte:head>
 <article
-	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate text-yellow-50 px-4"
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
 >
 	<h1>People</h1>
 	<h2>Contributors</h2>

frontend/src/routes/docs/develop.svelte

@@ -6,7 +6,7 @@
 	/>
 </svelte:head>
 <article
-	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate text-yellow-50 px-4"
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
 >
 	<h1>Development-setup</h1>
 

frontend/src/routes/docs/import-from-kahoot.svelte

@@ -5,7 +5,9 @@
 		content="How to import quizzes from KAHOOT! into ClassQuiz, the open-source quiz-application,  easily"
 	/>
 </svelte:head>
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
+<article
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
+>
 	<h1>Import Quizzes from Kahoot into ClassQuiz</h1>
 
 	<p>

frontend/src/routes/docs/index.svelte

@@ -5,7 +5,9 @@
 		content="The overview about the docs for ClassQuiz, the open-source quiz-application"
 	/>
 </svelte:head>
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
+<article
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
+>
 	<h1>Welcome to the ClassQuiz docs!</h1>
 	<h2>Index</h2>
 	<ul>

frontend/src/routes/docs/privacy-policy.svelte

@@ -16,7 +16,9 @@
 	/>
 </svelte:head>
 
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-gray px-4">
+<article
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
+>
 	<h1>Privacy Policy</h1>
 
 	<h2>What gets stored for how long and why</h2>

frontend/src/routes/docs/roadmap.svelte

@@ -5,7 +5,9 @@
 		content="The roadmap for ClassQuiz, the open-source quiz-application"
 	/>
 </svelte:head>
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
+<article
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
+>
 	<h1>Roadmap</h1>
 
 	<ul>

frontend/src/routes/docs/self-host.svelte

@@ -15,7 +15,9 @@
 		content="How to self-host ClassQuiz, the open-source quiz-application"
 	/>
 </svelte:head>
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-gray px-4">
+<article
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
+>
 	<h1>Self-Hosting</h1>
 	<p>Since ClassQuiz is open-source, it can also be self-hosted.</p>
 

frontend/src/routes/edit.svelte

@@ -30,7 +30,7 @@
 	import Editor from '$lib/editor.svelte';
 	import { getLocalization } from '$lib/i18n';
 	import { navbarVisible } from '$lib/stores';
-	import { dataSchema } from '$lib/jupSchemas';
+	import { dataSchema } from '$lib/yupSchemas';
 
 	navbarVisible.set(true);
 

frontend/src/routes/explore.svelte

@@ -47,14 +47,18 @@
 		{#each quizzes.hits as quiz}
 			<div class="flex justify-center">
 				<a href="/view/{quiz.id}" class="h-max w-fit">
-					<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
+					<div
+						class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20 dark:bg-slate-800"
+					>
 						<!--			<div class='flex justify-center md:justify-end -mt-16'>
 										<img class='w-20 h-20 object-cover rounded-full border-2 border-indigo-500'
 											 src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
 									</div>-->
 						<div>
-							<h2 class="text-gray-800 text-3xl font-semibold">{quiz.title}</h2>
+							<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">
-							<p class="mt-2 text-gray-600">{quiz.description}</p>
+								{quiz.title}
+							</h2>
+							<p class="mt-2 text-gray-600 dark:text-gray-300">{quiz.description}</p>
 						</div>
 						<div class="flex mt-4">
 							<span>{$t('explore_page.made_by')} {quiz.user}</span>

frontend/src/routes/view/[quiz_id].svelte

@@ -125,7 +125,7 @@
 					<h1 class="text-3xl m-1">{$t('words.question')} {index_question + 1}</h1>
 
 					<!--					<label class='m-1 flex flex-row gap-2 w-3/5'>-->
-					<p class="text-black w-full bg-inherit">
+					<p class="text-black w-full bg-inherit text-black dark:text-gray-200">
 						{$t('words.question')}: {question.question}
 					</p>
 					<!--					</label>-->

frontend/tailwind.config.cjs

@@ -1,6 +1,6 @@
 const config = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
-
+	darkMode: 'class',
 	theme: {
 		extend: {
 			colors: {