dark mode (we need to improve the colours a lot)

src/lib/Nav.svelte

@@ -2,6 +2,7 @@
 	import IconBars from "~icons/fa6-solid/bars";
 	import IconMatrix from "~icons/simple-icons/matrix";
 	import IconGitHub from "~icons/simple-icons/github";
+	import ThemeToggle from "./ThemeToggle.svelte";
 </script>
 
 <nav>
@@ -34,6 +35,9 @@
 		<a href="https://github.com/ProjectSegfault/">
 			<IconGitHub />
 		</a>
+		<div>
+			<ThemeToggle />
+		</div>
 	</div>
 </nav>
 

src/lib/ThemeToggle.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { afterUpdate } from "svelte";
+	import DarkMode from "svelte-dark-mode";
+	import type { Theme } from "svelte-dark-mode/types/DarkMode.svelte";
+    import IconSun from "~icons/fa6-solid/sun";
+    import IconMoon from "~icons/fa6-solid/moon";
+
+
+	let theme: Theme;
+
+	afterUpdate(() => {
+		document.documentElement.className = theme;
+	});
+
+	let toggle = () => {
+		theme = theme === "dark" ? "light" : "dark";
+	};
+</script>
+
+<DarkMode bind:theme />
+
+{#if theme === "dark"}
+	<div on:click={toggle}>
+        <IconSun />
+    </div>
+{:else if theme === "light"}
+    <div on:click={toggle}>
+        <IconMoon />
+    </div>
+{/if}
+
+<style>
+    div {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+</style>

src/lib/app.css

@@ -17,18 +17,29 @@
 }
 
 html {
-	--primary: #151515;
-	--secondary: #252525;
-	--tertiary: #353535;
 	--accent-primary: #b59bd8;
 	--accent-secondary: #b59bd8;
 	--accent-translucent: #b59bd898;
-	--text: #ffffffde;
-	--grey: #5454547a;
 	--font-primary: Raleway;
 	--font-header: Raleway;
 }
 
+html.dark {
+	--primary: #151515;
+	--secondary: #252525;
+	--tertiary: #353535;
+	--text: #ffffffde;
+	--grey: #5454547a;
+}
+
+html.light {
+	--primary: #dddddd;
+	--secondary: #bbbbbb;
+	--tertiary: #939393;
+	--text: #1f1f1f;
+	--grey: #292929;
+}
+
 body {
 	font-family: var(--font-primary);
 	background-color: var(--primary);