From fab181d4b96803e0d1c4724fa01659be8271232c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Fri, 12 Apr 2024 10:43:44 +0200
Subject: [PATCH 1/3] fix(darktheme): switch to mode-watcher

---
 package.json                             |  1 +
 pnpm-lock.yaml                           | 11 ++++++++
 src/lib/components/DarkModeToggle.svelte | 35 +++++-------------------
 src/routes/+layout.svelte                | 17 ++----------
 4 files changed, 21 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index d8f517c0..840e7e92 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
+		"mode-watcher": "^0.3.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a3bea0e..35f9da0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ devDependencies:
   eslint-plugin-svelte:
     specifier: ^2.36.0
     version: 2.36.0(eslint@8.57.0)(svelte@4.2.13)
+  mode-watcher:
+    specifier: ^0.3.0
+    version: 0.3.0(svelte@4.2.13)
   postcss:
     specifier: ^8.4.38
     version: 8.4.38
@@ -2253,6 +2256,14 @@ packages:
     hasBin: true
     dev: true
 
+  /mode-watcher@0.3.0(svelte@4.2.13):
+    resolution: {integrity: sha512-k8jjuTx94HaaRKWO6JDf8wL761hFatrTIHJKl+E+3JWcnv+GnMBH062zcLsy0lbCI3n7RZxxHaWi66auFnUO4g==}
+    peerDependencies:
+      svelte: ^4.0.0
+    dependencies:
+      svelte: 4.2.13
+    dev: true
+
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
diff --git a/src/lib/components/DarkModeToggle.svelte b/src/lib/components/DarkModeToggle.svelte
index b671fd33..8ec90f60 100644
--- a/src/lib/components/DarkModeToggle.svelte
+++ b/src/lib/components/DarkModeToggle.svelte
@@ -1,35 +1,14 @@
 <script lang="ts">
 	// functions
-	import { onMount } from 'svelte';
-
-	// variables
-	let darkMode: boolean;
-
-	onMount(() => {
-		const theme: string | null = localStorage.getItem('theme');
-
-		if (theme === 'dark') {
-			darkMode = true;
-		} else if (theme === 'light') {
-			darkMode = false;
-		} else {
-			darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		}
-	});
-
-	function toggleDarkMode() {
-		darkMode = !darkMode;
-		localStorage.setItem('theme', darkMode ? 'dark' : 'light');
-
-		if (darkMode) {
-			document.documentElement.classList.add('dark');
-		} else {
-			document.documentElement.classList.remove('dark');
-		}
-	}
+	import { toggleMode } from 'mode-watcher';
 </script>
 
-<button class="absolute top-0 right-0 md:px-4 md:py-4" on:click={toggleDarkMode}>
+<svelte:head>
+	<!-- prevent Dark Reader from inverting the page -->
+	<meta name="darkreader-lock" />
+</svelte:head>
+
+<button class="absolute top-0 right-0 md:px-4 md:py-4" on:click={toggleMode}>
 	<div class="h-10 w-10 object-cover hover:scale-110 duration-300 ease-in-out">
 		<svg
 			class="hidden dark:block fill-hearchco-primary dark:fill-hearchco-secondary stroke-hearchco-primary dark:stroke-hearchco-secondary"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 40f37724..f6dfa33d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,25 +3,12 @@
 	import '../app.css';
 
 	// components
+	import { ModeWatcher } from 'mode-watcher';
 	import DarkModeToggle from '$lib/components/DarkModeToggle.svelte';
 	import Footer from '$lib/components/Footer.svelte';
 </script>
 
-<svelte:head>
-	<!-- prevent Dark Reader from inverting the page -->
-	<meta name="darkreader-lock" />
-	<script type="text/javascript">
-		if (
-			localStorage.theme === 'dark' ||
-			(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-		) {
-			document.documentElement.classList.add('dark');
-		} else {
-			document.documentElement.classList.remove('dark');
-		}
-	</script>
-</svelte:head>
-
+<ModeWatcher />
 <DarkModeToggle />
 <slot />
 <Footer />

From 088f4aae2af31dc23ebc6ce36b3999dd770b9caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Fri, 12 Apr 2024 10:51:02 +0200
Subject: [PATCH 2/3] fix(darktheme): enable transitions

---
 src/routes/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f6dfa33d..d4ffcbf9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,7 +8,7 @@
 	import Footer from '$lib/components/Footer.svelte';
 </script>
 
-<ModeWatcher />
+<ModeWatcher disableTransitions={false} />
 <DarkModeToggle />
 <slot />
 <Footer />

From 87294782e9521df3fd8269b7eedde3a344a9c902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Sat, 13 Apr 2024 13:13:36 +0200
Subject: [PATCH 3/3] revert: switch back to no transitions

---
 src/routes/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d4ffcbf9..f6dfa33d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,7 +8,7 @@
 	import Footer from '$lib/components/Footer.svelte';
 </script>
 
-<ModeWatcher disableTransitions={false} />
+<ModeWatcher />
 <DarkModeToggle />
 <slot />
 <Footer />