From be1bd54fb93d450c1aaf56806c32159883cb2ffe Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Thu, 26 Oct 2023 10:24:30 +0100
Subject: [PATCH] Adapted themings to allow for light and dark

---
 src/app.html                    | 72 +++++++++++++++++++++++----------
 src/lib/components/Card.svelte  |  4 +-
 src/lib/components/Modal.svelte |  2 +-
 src/main.svelte                 |  6 +--
 src/routes/+layout.svelte       |  2 +-
 src/routes/contact/+page.svelte |  6 ++-
 src/timeline.svelte             |  6 +--
 7 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/src/app.html b/src/app.html
index a1e3e1c..3fc9110 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,22 +7,50 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
 		<meta name="viewport" content="width=device-width" />
-		<meta name="color-scheme" content="dark" />
 		%sveltekit.head%
 
 		<style>
-			:root {
-				--bg: #282c34;
-				--bg-grad: #5a606d9f;
-				--bg-2: #838488;
-				--fg: #ABB2BF;
-				--red: #E06C75;
-				--green: #98C379;
-				--yellow: #E5C07B;
-				--blue: #61AFEF;
-				--purple: #C678DD; 
-				--cyan: #56B6C2;
+			@media (prefers-color-scheme: dark) {
+				:root {
+					--bg: #282c34;
+					--bg-secondary: #474d57;
+					--bg-grad-1: #484e58;
+					--bg-grad-2: #4e5560;
+					--bg-grad-3: #59616d;
+					--bg-grad-4: #606a7b;
+					--bg-grad-5: #606978;
+					--input: #4e5560;
+					--fg: #ABB2BF;
+					--header: #E06C75;
+					--link: #98C379;
+					--hover: #56B6C2;
+					--glow: #C678DD;
 
+					--green: #98C379;
+					--red: #E06C75;
+				}
+			}
+			@media (prefers-color-scheme: light) {
+				:root {
+					--bg: #fff;
+					--bg-secondary: #ebebeb;
+					--bg-grad-1: #c1c1c1;
+					--bg-grad-2: #a1a1a1;
+					--bg-grad-3: #858585;
+					--bg-grad-4: #616161;
+					--bg-grad-5: #484848;
+					--input: #a9a9a9;
+					--fg: #2f2f2f;
+					--header: #514a4a;
+					--link: #df0000;
+					--hover: #4f4b489b;
+					--glow: #545454;
+					
+					--green: #98C379;
+					--red: #E06C75;
+				}
+			}
+			:root {
 				--font: Consolas, 'Cascadia Code', Monaco, 'SF Mono', 'DejaVu Sans Mono', 'Roboto Mono';
 
 				background: var(--bg);
@@ -33,12 +61,12 @@
 			}
 
 			h1, h2, h3 {
-				color: var(--red);
+				color: var(--header);
 				border: 0;
 			}
 
 			hr {
-				border: .2em solid var(--bg-grad);
+				border: .2em solid var(--bg-grad-3);
   				border-radius: 5em;
 				width: 100%;
 			}
@@ -52,7 +80,7 @@
 				color: var(--fg);
 			}
 			*::-webkit-scrollbar-thumb:hover{
-				color: var(--green);
+				color: var(--link);
 			}
 
 			*::-webkit-scrollbar-thumb {        
@@ -68,7 +96,7 @@
 			a {
 				text-decoration: none;				
 				position: relative;
-				color: var(--green);
+				color: var(--link);
 				white-space: nowrap;
 			}
 
@@ -84,26 +112,26 @@
 			
 			a:hover:after {
 				width: 100%;
-				color: var(--purple);
+				color: var(--glow);
 			}
 
 			a:hover {
-				color: var(--purple);
+				color: var(--glow);
 			}
 
 			a:active {
-				color: var(--red);
+				color: var(--header);
 			}
 
 			.button {
 				color: var(--fg);
-				background-color: var(--bg-2);
-				box-shadow: .1em .1em .1em var(--green);
+				background-color: var(--bg-grad-1);
+				box-shadow: .1em .1em .1em var(--link);
 				transition: all 0.2s;
 			}
 
 			.button:hover {
-				box-shadow: .3em .3em .3em var(--red);    
+				box-shadow: .3em .3em .3em var(--header);    
 			}
 		</style>
 	</head>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index dd3b702..c5f4ab9 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -16,13 +16,13 @@
         flex-wrap: wrap;
         flex: 2 1 15em;
         padding: .5em 2.5em 2em 2.5em;
-        background: var(--bg-grad);
+        background: var(--bg-secondary);
         border-radius: .5em;
         scroll-snap-align: start;
 		transition: all 0.2s;
     }
     .card:hover {
-        box-shadow: .5em .5em .5em var(--cyan);
+        box-shadow: .5em .5em .5em var(--hover);
     }
 
     .card .card-header :global(div) {
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index 00f7070..6325c42 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -36,7 +36,7 @@
         border-right: 2em;
         background: var(--bg);
         color: var(--fg);
-        box-shadow: .5em .5em .5em var(--red);
+        box-shadow: .5em .5em .5em var(--header);
 	}
 	dialog::backdrop {
 		background: rgba(0, 0, 0, 0.7);
diff --git a/src/main.svelte b/src/main.svelte
index dec6d3f..655da12 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -10,10 +10,10 @@
 
 <style>
     .main-card {
-        background-color: var(--bg-grad);
+        background-color: var(--bg-secondary);
         border-radius: 1em;
         padding: .2em 2em 2em 2em;
-        box-shadow: .5em .5em .5em var(--purple);
+        box-shadow: .5em .5em .5em var(--glow);
     }
     
     .flex-container {
@@ -26,7 +26,7 @@
         height: 8em;
         width: 8em;
         padding: 1em 1em 1em 1em;
-        border: .5em solid var(--bg-grad);
+        border: .5em solid var(--bg-grad-3);
     }
     
     .about {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 97699fd..1b5f860 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Toasts from "$lib/components/Toasts/Toasts.svelte";
 </script>
 
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 2a4a087..1ff019e 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -9,6 +9,7 @@
     if (sent == "true") {
         addToast(new Toast("Thank you! Your E-Mail has been sent. I will reply as soon as possible!", ToastType.Success, true, 5000));
     }
+    // Can't use else otherwise the warning will display on load
     if (sent == "false") {
         addToast(new Toast("Sorry, your E-Mail could not be sent... Please try again later!", ToastType.Error, true, 5000));
     }
@@ -26,7 +27,8 @@
     
     input, textarea {
         padding: 1em 0em 1em 1em;
-        background-color: var(--bg-grad);
+        background-color: var(--input);
+        color: var(--fg);
         border: 0; 
         outline: 0;
         border-radius: 8px;
@@ -35,7 +37,7 @@
         transition: all 0.15s;
     
         &:focus, &:hover{
-            box-shadow: .2em .2em .2em var(--red);
+            box-shadow: .2em .2em .2em var(--green);
         }
     }
 
diff --git a/src/timeline.svelte b/src/timeline.svelte
index 8e1ce62..a677455 100644
--- a/src/timeline.svelte
+++ b/src/timeline.svelte
@@ -24,7 +24,7 @@
 			</TimelineOppositeContent>
 
 			<TimelineSeparator>
-				<TimelineDot style={`background-color: var(--cyan); border-color: var(--bg-grad);`} />
+				<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad);`} />
 				<TimelineConnector />
 			</TimelineSeparator>
 			<TimelineContent>
@@ -39,7 +39,7 @@
 	.oposite-content-title {
 		margin: 0;
 		padding: 0;
-		color: var(--bg-2);
+		color: var(--bg-grad-2);
 	}
 	.content-title {
 		margin: 0;
@@ -50,7 +50,7 @@
 		margin: 0;
 		padding: 0;
 		margin-top: 1rem;
-		color: var(--foreground);
+		color: var(--fg);
 		font-weight: lighter;
 		padding: 0.5rem 0;
 	}