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

package.json

@@ -23,6 +23,7 @@
 		"prettier-plugin-svelte": "^2.7.0",
 		"svelte": "^3.49.0",
 		"svelte-check": "^2.8.0",
+		"svelte-dark-mode": "^2.1.0",
 		"svelte-hcaptcha": "^0.1.1",
 		"svelte-preprocess": "^4.10.7",
 		"svelte-seo": "^1.4.1",

pnpm-lock.yaml

@@ -11,6 +11,7 @@ specifiers:
   prettier-plugin-svelte: ^2.7.0
   svelte: ^3.49.0
   svelte-check: ^2.8.0
+  svelte-dark-mode: ^2.1.0
   svelte-hcaptcha: ^0.1.1
   svelte-preprocess: ^4.10.7
   svelte-seo: ^1.4.1
@@ -31,6 +32,7 @@ devDependencies:
   prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
   svelte: 3.49.0
   svelte-check: 2.8.0_svelte@3.49.0
+  svelte-dark-mode: 2.1.0
   svelte-hcaptcha: 0.1.1
   svelte-preprocess: 4.10.7_uslzfc62di2n2otc2tvfklnwji
   svelte-seo: 1.4.1_typescript@4.7.4
@@ -1044,6 +1046,10 @@ packages:
       - sugarss
     dev: true
 
+  /svelte-dark-mode/2.1.0:
+    resolution: {integrity: sha512-/QmIqWGwzcfE82FAMuHBlKFwudW7Vcos60Ii8j/mJZ0H6kGAXwL5EGlcc8voBJMJv/i0QZmhp5b1ZX/XKg9NJQ==}
+    dev: true
+
   /svelte-hcaptcha/0.1.1:
     resolution: {integrity: sha512-iFF3HwfrCRciJnDs4Y9/rpP/BM2U/5zt+vh+9d4tALPAHVkcANiJIKqYuS835pIaTm6gt+xOzjfFI3cgiRI29A==}
     dev: true

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);