From 05ccfc099700d1850a61a80555e2b485c4ff2c34 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Thu, 26 Oct 2023 21:41:18 +0100
Subject: [PATCH] Added ability to switch between light and dark mode

---
 src/app.html                            |  45 +----------
 src/lib/components/ThemeSwitcher.svelte | 102 ++++++++++++++++++++++++
 src/lib/store.ts                        |   2 +-
 src/routes/+layout.svelte               |   6 +-
 src/timeline.svelte                     |   4 +-
 static/themes/dark.css                  |  18 +++++
 static/themes/light.css                 |  18 +++++
 7 files changed, 148 insertions(+), 47 deletions(-)
 create mode 100644 src/lib/components/ThemeSwitcher.svelte
 create mode 100644 static/themes/dark.css
 create mode 100644 static/themes/light.css

diff --git a/src/app.html b/src/app.html
index acd8655..b8bf4d4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -10,56 +10,17 @@
 		%sveltekit.head%
 
 		<style>
-			@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);
 				color: var(--fg);
 				font-family: var(--font);
 				font-size: 110%;
 				margin: 2rem;
+				transition: all 0.2s;
 			}
-
+			
 			h1, h2, h3 {
 				color: var(--header);
 				border: 0;
diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
new file mode 100644
index 0000000..066e783
--- /dev/null
+++ b/src/lib/components/ThemeSwitcher.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { browser } from '$app/environment';
+
+    export let darkMode: boolean = true;
+
+    function onThemeSwitch() {
+        darkMode = !darkMode;
+
+        localStorage.setItem('theme', darkMode ? 'dark' : 'light');
+
+        darkMode
+            ? document.documentElement.classList.add('dark')
+            : document.documentElement.classList.remove('dark');
+    }
+
+    
+    if (browser) {
+        if (
+            localStorage.theme === 'dark' ||
+            (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        ) {
+            document.documentElement.classList.add('dark');
+            darkMode = true;
+        } else {
+            document.documentElement.classList.remove('dark');
+            darkMode = false;
+        }
+    }
+</script>
+
+<style>
+    input {
+        display: none;
+    }
+
+    .switch {
+        position: absolute;
+        top: 0em;
+        right: 0em;
+        display: inline-block;
+        width: 3.75em;
+        height: 2.125em;
+    }
+
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        background-color: var(--bg-grad-4);
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        -webkit-transition: .4s;
+        transition: .4s;
+    }
+
+    .slider:before {
+        position: absolute;
+        content: "";
+        height: 80%;
+        width: 45%;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -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);
+        -ms-transform: translateX(1.625em);
+        transform: translateX(1.625em);
+    }
+
+    .slider.round {
+        border-radius: 2.125em;
+    }
+
+    .slider.round:before {
+        border-radius: 50%;
+    }
+</style>
+
+<svelte:head>
+    <link rel="stylesheet" href={`/themes/${darkMode ? 'dark' : 'light'}.css`} />
+</svelte:head>
+
+
+<div class="toggle-wrapper not-required">
+    <label class="switch">
+        <input type="checkbox" checked={darkMode} on:click={onThemeSwitch}>
+        <span class="slider round"></span>
+    </label>
+</div>
\ No newline at end of file
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 543d65d..9d46f52 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -25,4 +25,4 @@ export const addToast = (toast: Toast) => {
 
 export const dismissToast = (id: number) => {
   toasts.update((all) => all.filter((t) => t.id !== id));
-};
+};
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1b5f860..0cdcec1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Toasts from "$lib/components/Toasts/Toasts.svelte";
+    import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
 </script>
 
 <style>
@@ -18,7 +19,7 @@
 
     nav {
         position: relative;
-        overflow:visible;
+        overflow: visible;
         display: flex;
         justify-content: center;
         gap: 1.5em;
@@ -48,9 +49,10 @@
     <a href = "/">//Profile</a>
     <a href = "/repos">//Repos</a>
     <a href = "/contact">//Contact</a>
+    <ThemeSwitcher />
 </nav>
 
 <div class="main-container fade">
-    <Toasts></Toasts>
+    <Toasts />
     <slot />
 </div>
diff --git a/src/timeline.svelte b/src/timeline.svelte
index 6f3b23b..ca20265 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);`} />
+						<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
 					</div>
 				{:else}
-					<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad);`} />
+					<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
 				{/if}
 				<TimelineConnector />
 			</TimelineSeparator>
diff --git a/static/themes/dark.css b/static/themes/dark.css
new file mode 100644
index 0000000..54a6366
--- /dev/null
+++ b/static/themes/dark.css
@@ -0,0 +1,18 @@
+: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;
+}
\ No newline at end of file
diff --git a/static/themes/light.css b/static/themes/light.css
new file mode 100644
index 0000000..ec95469
--- /dev/null
+++ b/static/themes/light.css
@@ -0,0 +1,18 @@
+: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;
+}
\ No newline at end of file