From fb42eca8f93b5c9ba310fc561dd456a691c14de3 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 30 Jul 2023 18:19:07 +0100
Subject: [PATCH] feat(#2): Add a dark mode

---
 src/app.html                             | 45 +++++++++++++++++++++---
 src/components/EstimateGroupsList.svelte |  4 +++
 src/components/Modal.svelte              |  4 +++
 src/routes/+layout.svelte                | 45 ++++++++++++++++++------
 4 files changed, 83 insertions(+), 15 deletions(-)
diff --git a/src/app.html b/src/app.html
index b653808..2e40453 100644
--- a/src/app.html
+++ b/src/app.html
@@ -19,8 +19,46 @@
 		<meta name="viewport" content="width=device-width" />
 		<title>Estimation Poker</title>
 		%sveltekit.head%
+		<style>
+			:root {
+				--background-color: #fff;
+				--opposite-background-color: #333;
+				--text-color: #333;
+				--text-link-color: #423e37;
+				--text-hover-color: #81796c;
+			}
+
+			[data-theme='dark'] {
+				--background-color: #333;
+				--opposite-background-color: #fff;
+				--text-color: #fff;
+				--text-link-color: #fff;
+				--text-hover-color: #a8a8a8;
+			}
+
+			body {
+				background-color: var(--background-color);
+				color: var(--text-color);
+			}
+
+			.footer-container a {
+				color: var(--text-link-color);
+			}
+
+			.footer-container a:hover {
+				color: var(--text-hover-color);
+			}
+
+			#themeToggleButton {
+				background-color: var(--opposite-background-color);
+			}
+		</style>
 	</head>
-	<body data-sveltekit-preload-data="hover" style="margin: 0; font-family: Arial, sans-serif">
+	<body
+		data-sveltekit-preload-data="hover"
+		style="margin: 0; font-family: Arial, sans-serif"
+		onload="document.body.setAttribute('data-theme', localStorage.getItem('theme') || 'light')"
+	>
 		<div style="display: contents">%sveltekit.body%</div>
 
 		<script>
@@ -63,10 +101,7 @@
 				if ('serviceWorker' in navigator) {
 					navigator.serviceWorker.register('%sveltekit.assets%/service-worker.js').then(
 						function (registration) {
-							console.log(
-								'ServiceWorker registration successful with scope: ',
-								registration.scope
-							);
+							console.log('ServiceWorker registration successful with scope: ', registration.scope);
 						},
 						function (err) {
 							console.log('ServiceWorker registration failed: ', err);
diff --git a/src/components/EstimateGroupsList.svelte b/src/components/EstimateGroupsList.svelte
index 390f7c1..90230f3 100644
--- a/src/components/EstimateGroupsList.svelte
+++ b/src/components/EstimateGroupsList.svelte
@@ -70,4 +70,8 @@
 		display: inline;
 		margin-right: 5px;
 	}
+
+	#estimate-groups-list {
+		color: #333;
+	}
 </style>
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index ff98678..eb1d61e 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -141,4 +141,8 @@
 	h2 {
 		margin-bottom: 0px;
 	}
+
+	.modal {
+		color: #333;
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 56a0093..a2ab9e2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,3 +1,23 @@
+<script>
+	let theme = 'light';
+
+	if (typeof localStorage !== 'undefined') {
+		theme = localStorage.getItem('theme');
+	}
+
+	function toggleTheme() {
+		const html = document.querySelector('body');
+		theme = html.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
+		html.setAttribute('data-theme', theme);
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem('theme', theme);
+		}
+	}
+</script>
+
+<button id="themeToggleButton" on:click={toggleTheme}>
+	<emoji>{theme === 'light' ? '🌙' : '☀️'}</emoji>
+</button>
 <header class="topbar-container">
 	<div class="topbar-items"><h1><a href="/">Estimation Poker</a></h1></div>
 	<p id="install-app-btn-container" class="topbar-items">
@@ -19,6 +39,21 @@
 </footer>
 
 <style>
+	#themeToggleButton {
+		position: fixed;
+		top: 7px;
+		left: 7px;
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+		border: none;
+		outline: none;
+	}
+
 	#main-container {
 		margin: 0 auto;
 		max-width: 100%; /* Allow the element to grow wider than its parent */
@@ -98,9 +133,7 @@
 		bottom: 0;
 		width: 100%;
 		text-align: center;
-		color: #423e37;
 		padding-bottom: 10px;
-		background-color: white;
 	}
 
 	.footer-container hr {
@@ -110,14 +143,6 @@
 		margin-right: auto;
 	}
 
-	.footer-container a {
-		color: #423e37;
-	}
-
-	.footer-container a:hover {
-		color: #81796c;
-	}
-
 	.button {
 		appearance: none;
 		border: 1px solid rgba(27, 31, 35, 0.15);
