From 7784875a729513416fdf59fbf0618250aa93046a Mon Sep 17 00:00:00 2001
From: Daniel Vaswani <vaswanidaniel@gmail.com>
Date: Mon, 27 Jun 2022 04:27:21 +0200
Subject: [PATCH 1/2] extract update ui part to its own function

---
 src/lib/ThemeSelector.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/ThemeSelector.svelte b/src/lib/ThemeSelector.svelte
index ec3923f..87d8dbf 100644
--- a/src/lib/ThemeSelector.svelte
+++ b/src/lib/ThemeSelector.svelte
@@ -10,6 +10,10 @@
 		selected = !!ls.theme;
 		theme ? (ls.theme = theme.toLowerCase()) : ls.removeItem("theme");
 
+		updateUIWithPreference(ls);
+	};
+
+	const updateUIWithPreference = (ls: Storage) => {
 		if (
 			ls.theme === "dark" ||
 			(!("theme" in ls) && window.matchMedia("(prefers-color-scheme: dark)").matches)

From 0eb7b81c15a0bc6da634bd37ebb73d275e623c99 Mon Sep 17 00:00:00 2001
From: Daniel Vaswani <vaswanidaniel@gmail.com>
Date: Mon, 27 Jun 2022 04:29:14 +0200
Subject: [PATCH 2/2] function to preview and unpreview theme on hover

---
 src/lib/ThemeSelector.svelte | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/lib/ThemeSelector.svelte b/src/lib/ThemeSelector.svelte
index 87d8dbf..4d7357e 100644
--- a/src/lib/ThemeSelector.svelte
+++ b/src/lib/ThemeSelector.svelte
@@ -22,6 +22,21 @@
 		else document.documentElement.classList.remove("dark");
 	};
 
+	const previewTheme = (theme?: string) => {
+		document.documentElement.classList.remove("dark");
+		if (!theme) {
+			if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+				document.documentElement.classList.add("dark");
+		} else document.documentElement.classList.add(theme?.toLowerCase());
+	};
+
+	const unpreviewTheme = () => {
+		if (!ls) return;
+		document.documentElement.classList.remove("dark");
+
+		updateUIWithPreference(ls);
+	};
+
 	onMount(() => {
 		typeof localStorage !== `undefined` && (ls = localStorage);
 		if (!ls) return;
@@ -54,6 +69,8 @@
 		>
 			<div
 				on:click={() => setSelectedTheme()}
+				on:mouseenter={() => previewTheme()}
+				on:mouseleave={() => unpreviewTheme()}
 				class="flex cursor-pointer items-center hover:bg-slate-100 dark:hover:bg-slate-700 dark:text-white"
 			>
 				<svg
@@ -73,6 +90,8 @@
 			</div>
 			<div
 				on:click={() => setSelectedTheme("Light")}
+				on:mouseenter={() => previewTheme("Light")}
+				on:mouseleave={() => unpreviewTheme()}
 				class="flex cursor-pointer items-center hover:bg-slate-100 dark:hover:bg-slate-700 dark:text-white"
 			>
 				<svg
@@ -92,6 +111,8 @@
 			</div>
 			<div
 				on:click={() => setSelectedTheme("Dark")}
+				on:mouseenter={() => previewTheme("Dark")}
+				on:mouseleave={() => unpreviewTheme()}
 				class="flex cursor-pointer items-center hover:bg-slate-100 dark:hover:bg-slate-700 dark:text-white"
 			>
 				<svg