From f7e3acf384e3d5e3f2fa723bf01f4e196f1dad58 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Thu, 6 Mar 2025 14:24:24 +0000
Subject: [PATCH] #4 Changed light colour theme in favour of a cold blue theme

---
 src/app.html                            |  4 ++--
 src/lib/components/ThemeSwitcher.svelte | 13 +++----------
 src/main.svelte                         |  2 +-
 src/timeline.svelte                     |  6 +++---
 static/themes/dark.css                  | 15 +++++++--------
 static/themes/light.css                 | 25 ++++++++++++-------------
 6 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/src/app.html b/src/app.html
index 267085b..a134e52 100644
--- a/src/app.html
+++ b/src/app.html
@@ -28,7 +28,7 @@
 			}
 
 			hr {
-				border: .2em solid var(--bg-grad-3);
+				border: .2em solid var(--accent);
   				border-radius: 5em;
 				width: 100%;
 			}
@@ -87,7 +87,7 @@
 
 			.button {
 				color: var(--fg);
-				background-color: var(--bg-grad-1);
+				background-color: var(--accent);
 				transition: all 0.2s;
 			}
 
diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
index 066e783..67c6428 100644
--- a/src/lib/components/ThemeSwitcher.svelte
+++ b/src/lib/components/ThemeSwitcher.svelte
@@ -45,12 +45,12 @@
     .slider {
         position: absolute;
         cursor: pointer;
-        background-color: var(--bg-grad-4);
+        background-color: var(--accent);
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #ccc;
+        background-color: var(--accent);
         -webkit-transition: .4s;
         transition: .4s;
     }
@@ -62,17 +62,10 @@
         width: 45%;
         left: 4px;
         bottom: 4px;
-        background-color: white;
+        background-color: var(--bg);
         -webkit-transition: .4s;
         transition: .4s;
     }
-    input:checked + .slider {
-        background-color: var(--bg-grad-1);
-    }
-
-    input:checked + .slider:before {
-        background: var(--bg);
-    }
 
     input:checked + .slider:before {
         -webkit-transform: translateX(1.625em);
diff --git a/src/main.svelte b/src/main.svelte
index 8bec351..1452291 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -28,7 +28,7 @@
         height: 8em;
         width: 8em;
         padding: 1em 1em 1em 1em;
-        border: .5em solid var(--bg-grad-3);
+        border: .5em solid var(--accent);
     }
     
     .about {
diff --git a/src/timeline.svelte b/src/timeline.svelte
index ca20265..55c0bf8 100644
--- a/src/timeline.svelte
+++ b/src/timeline.svelte
@@ -26,10 +26,10 @@
 			<TimelineSeparator>
 				{#if item.duration.includes('Present') || !item.duration.includes('-')}
 					<div class="elementToFadeInAndOut">
-						<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
+						<TimelineDot style={`background-color: var(--link); border-color: var(--accent);`} />
 					</div>
 				{:else}
-					<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
+					<TimelineDot style={`background-color: var(--link); border-color: var(--accent);`} />
 				{/if}
 				<TimelineConnector />
 			</TimelineSeparator>
@@ -45,7 +45,7 @@
 	.oposite-content-title {
 		margin: 0;
 		padding: 0;
-		color: var(--bg-grad-2);
+		color: var(--accent);
 	}
 	.content-title {
 		margin: 0;
diff --git a/static/themes/dark.css b/static/themes/dark.css
index a07e1eb..5b48314 100644
--- a/static/themes/dark.css
+++ b/static/themes/dark.css
@@ -1,17 +1,16 @@
 :root {
     --bg: #282c34;
     --bg-secondary: #3e434b;
-    --bg-grad-1: #484e58;
-    --bg-grad-2: #4e5560;
-    --bg-grad-3: #59616d;
-    --bg-grad-4: #606a7b;
-    --bg-grad-5: #606978;
-    --input: #2b3136;
-    --fg: #9eaac0;
+    --accent: #59616d;
+
     --header: #E06C75;
+    --fg: #9eaac0;
+    
+    --input: #2b3136;
+    
     --link: #98C379;
-    --hover: #56B6C2;
     --glow: #C678DD;
+    --hover: #56B6C2;
 
     --green: #98C379;
     --red: #E06C75;
diff --git a/static/themes/light.css b/static/themes/light.css
index 809cce1..cb6ba16 100644
--- a/static/themes/light.css
+++ b/static/themes/light.css
@@ -1,18 +1,17 @@
 :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: #cbc9c9;
-    --fg: #2f2f2f;
-    --header: #514a4a;
-    --link: #df0000;
-    --hover: #4f4b489b;
-    --glow: #545454;
+    --bg: #1e1f2a;
+    --bg-secondary: #3a3f4b;
+    --accent: #777f8d;
+
+    --header: #cad1da;
+    --fg: #e4e1db;
     
+    --input: #2e3438;
+    
+    --link: #95add8;
+    --glow: #bcc3ca;
+    --hover: #cdd8e2;
+
     --green: #98C379;
     --red: #E06C75;
 }
\ No newline at end of file