💄 Added dark-mode

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%;