From b94dc767ff60396b811508bcaa2dd23f1cd07382 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sat, 9 Mar 2024 12:17:47 -0800
Subject: [PATCH 01/13] =?UTF-8?q?implement=20system=20wide=20light/dark=20?=
 =?UTF-8?q?mode=20option=20=F0=9F=94=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chat/Settings/General.svelte   | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 8825b7902..70670d27e 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -18,6 +18,41 @@
 
 	let showAdvanced = false;
 
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+		if (theme === 'system') {
+			updateSystemTheme();
+		}
+	});
+
+	function updateSystemTheme() {
+		const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		const systemTheme = isDarkMode ? 'dark' : 'light';
+		applyTheme(systemTheme);
+	}
+
+	function applyTheme(theme: string) {
+		localStorage.theme = theme;
+		const themeClassList = document.documentElement.classList;
+		if (theme === 'system') {
+			updateSystemTheme();
+			return;
+		}
+
+		themes
+			.filter((e) => e !== theme)
+			.forEach((e) => {
+				e.split(' ').forEach((e) => {
+					document.documentElement.classList.remove(e);
+				});
+			});
+
+		theme.split(' ').forEach((e) => {
+			document.documentElement.classList.add(e);
+		});
+
+		console.log(theme)
+	}
+
 	const toggleNotification = async () => {
 		const permission = await Notification.requestPermission();
 
@@ -123,24 +158,9 @@
 						class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
 						bind:value={theme}
 						placeholder="Select a theme"
-						on:change={(e) => {
-							localStorage.theme = theme;
-
-							themes
-								.filter((e) => e !== theme)
-								.forEach((e) => {
-									e.split(' ').forEach((e) => {
-										document.documentElement.classList.remove(e);
-									});
-								});
-
-							theme.split(' ').forEach((e) => {
-								document.documentElement.classList.add(e);
-							});
-
-							console.log(theme);
-						}}
+						on:change="{() => applyTheme(theme)}"
 					>
+						<option value="system">System</option>
 						<option value="dark">Dark</option>
 						<option value="light">Light</option>
 						<option value="rose-pine dark">Rosé Pine</option>

From 27153ddb037167c3a4b64df4bf4e13f1a7b59a74 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sat, 9 Mar 2024 13:12:15 -0800
Subject: [PATCH 02/13] remove unused variable

---
 src/lib/components/chat/Settings/General.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 70670d27e..6c8bca130 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -32,7 +32,7 @@
 
 	function applyTheme(theme: string) {
 		localStorage.theme = theme;
-		const themeClassList = document.documentElement.classList;
+
 		if (theme === 'system') {
 			updateSystemTheme();
 			return;

From 6f3acb347d76068b12c653e035566773e19ea7e7 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sat, 16 Mar 2024 23:14:13 -0700
Subject: [PATCH 03/13] update theme handling and persist selection using
 Svelte store

---
 .../components/chat/Settings/General.svelte   | 72 +++++++++----------
 src/lib/stores/index.ts                       | 24 ++++++-
 src/routes/+layout.svelte                     |  4 +-
 3 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 6c8bca130..8dca7c613 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { createEventDispatcher, onMount } from 'svelte';
+	import { theme, setTheme } from '../../../stores/index';
 	const dispatch = createEventDispatcher();
 
 	import { models, user } from '$lib/stores';
-
+ 
 	import AdvancedParams from './Advanced/AdvancedParams.svelte';
 
 	export let saveSettings: Function;
@@ -12,46 +13,34 @@
 
 	// General
 	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
-	let theme = 'dark';
+	let selectedTheme = 'system';
+	let actualTheme: string;
+	$: actualTheme = $theme;
 	let notificationEnabled = false;
 	let system = '';
 
 	let showAdvanced = false;
 
-	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-		if (theme === 'system') {
-			updateSystemTheme();
-		}
-	});
+	function applyTheme(theme: string) { // only apply visually
+        let themeToApply = theme;
+        if (theme === 'system') {
+            themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
 
-	function updateSystemTheme() {
-		const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		const systemTheme = isDarkMode ? 'dark' : 'light';
-		applyTheme(systemTheme);
-	}
+        themes
+            .filter((e) => e !== themeToApply)
+            .forEach((e) => {
+                e.split(' ').forEach((e) => {
+                    document.documentElement.classList.remove(e);
+                });
+            });
 
-	function applyTheme(theme: string) {
-		localStorage.theme = theme;
-
-		if (theme === 'system') {
-			updateSystemTheme();
-			return;
-		}
-
-		themes
-			.filter((e) => e !== theme)
-			.forEach((e) => {
-				e.split(' ').forEach((e) => {
-					document.documentElement.classList.remove(e);
-				});
-			});
-
-		theme.split(' ').forEach((e) => {
-			document.documentElement.classList.add(e);
-		});
+        themeToApply.split(' ').forEach((e) => {
+            document.documentElement.classList.add(e);
+        });
 
 		console.log(theme)
-	}
+    }
 
 	const toggleNotification = async () => {
 		const permission = await Notification.requestPermission();
@@ -98,9 +87,11 @@
 	};
 
 	onMount(async () => {
+		selectedTheme = localStorage.getItem('theme') ?? 'system';
+		applyTheme(selectedTheme);
+
 		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
 
-		theme = localStorage.theme ?? 'dark';
 		notificationEnabled = settings.notificationEnabled ?? false;
 		system = settings.system ?? '';
 
@@ -116,6 +107,13 @@
 		options = { ...options, ...settings.options };
 		options.stop = (settings?.options?.stop ?? []).join(',');
 	});
+
+	function handleThemeChange(newTheme: string) {
+        selectedTheme = newTheme;
+        setTheme(newTheme); // Update the store
+        localStorage.setItem('theme', newTheme); // Persist the theme selection
+        applyTheme(newTheme); // Apply the selected theme
+    }
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
@@ -127,7 +125,7 @@
 				<div class=" self-center text-xs font-medium">Theme</div>
 				<div class="flex items-center relative">
 					<div class=" absolute right-16">
-						{#if theme === 'dark'}
+						{#if actualTheme === 'dark'}
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 20 20"
@@ -140,7 +138,7 @@
 									clip-rule="evenodd"
 								/>
 							</svg>
-						{:else if theme === 'light'}
+						{:else if actualTheme === 'light'}
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 20 20"
@@ -156,9 +154,9 @@
 
 					<select
 						class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
-						bind:value={theme}
+						bind:value={selectedTheme}
 						placeholder="Select a theme"
-						on:change="{() => applyTheme(theme)}"
+						on:change="{() => handleThemeChange(selectedTheme)}"
 					>
 						<option value="system">System</option>
 						<option value="dark">Dark</option>
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index e25cd33ed..7b15cf1d9 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -1,5 +1,5 @@
 import { APP_NAME } from '$lib/constants';
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 
 // Backend
 export const WEBUI_NAME = writable(APP_NAME);
@@ -7,7 +7,27 @@ export const config = writable(undefined);
 export const user = writable(undefined);
 
 // Frontend
-export const theme = writable('dark');
+const rawThemeSetting = writable('system');
+export const theme = derived(rawThemeSetting, ($rawThemeSetting) => {
+	if ($rawThemeSetting === 'system') {
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+	return $rawThemeSetting;
+});
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+	rawThemeSetting.update((currentTheme) => {
+		if (currentTheme === 'system') {
+			return e.matches ? 'dark' : 'light';
+		}
+		return currentTheme;
+	});
+});
+
+export function setTheme(theme){
+	rawThemeSetting.set(theme);
+	localStorage.setItem('theme', theme);
+}
 
 export const chatId = writable('');
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d604f901a..6e19f263a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount, tick } from 'svelte';
-	import { config, user, theme, WEBUI_NAME } from '$lib/stores';
+	import { config, user, setTheme, WEBUI_NAME } from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { Toaster, toast } from 'svelte-sonner';
 
@@ -15,7 +15,7 @@
 	let loaded = false;
 
 	onMount(async () => {
-		theme.set(localStorage.theme);
+		setTheme(localStorage.theme)
 		// Check Backend Status
 		const backendConfig = await getBackendConfig();
 

From f1716f45b9a9ce46aa8e98be9f414ff2c3d1cae4 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sat, 16 Mar 2024 23:14:38 -0700
Subject: [PATCH 04/13] add event listener in app.html to handle system theme
 changes

---
 src/app.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app.html b/src/app.html
index 6216e56fa..931db8aa5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -13,13 +13,29 @@
 				(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
 			) {
 				document.documentElement.classList.add('light');
-			} else if (localStorage.theme) {
+			} else if (localStorage.theme && localStorage.theme !== 'system') {
 				localStorage.theme.split(' ').forEach((e) => {
 					document.documentElement.classList.add(e);
 				});
-			} else {
+			} else if (localStorage.theme && localStorage.theme === 'system') {
+				systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+				document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
+			}
+			else {
 				document.documentElement.classList.add('dark');
 			}
+
+			window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
+				if (localStorage.theme === 'system') {
+					if (e.matches) {
+						document.documentElement.classList.add('dark');
+						document.documentElement.classList.remove('light');
+					} else {
+						document.documentElement.classList.add('light');
+						document.documentElement.classList.remove('dark');
+					}
+				}
+			});
 		</script>
 
 		%sveltekit.head%

From f55dae3027bc31690a380c89ccdea73a8c5a8098 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sat, 16 Mar 2024 23:27:08 -0700
Subject: [PATCH 05/13] fix merge conflict

---
 src/lib/components/chat/Settings/General.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 95161f798..6a8bae355 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -117,9 +117,9 @@
 
 	function handleThemeChange(newTheme: string) {
         selectedTheme = newTheme;
-        setTheme(newTheme); // Update the store
-        localStorage.setItem('theme', newTheme); // Persist the theme selection
-        applyTheme(newTheme); // Apply the selected theme
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+        applyTheme(newTheme);
     }
 </script>
 
@@ -133,7 +133,7 @@
 				<div class="flex items-center relative">
 					<select
 						class=" dark:bg-gray-900 w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
-						bind:value={theme}
+						bind:value={selectedTheme}
 						placeholder="Select a theme"
 						on:change="{() => handleThemeChange(selectedTheme)}"
 					>

From f25a967a0baff37052cfae3281860e18b823edc9 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sat, 16 Mar 2024 23:54:18 -0700
Subject: [PATCH 06/13] =?UTF-8?q?add=20system=20theme=20=E2=9A=99=EF=B8=8F?=
 =?UTF-8?q?=20option=20to=20select=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/chat/Settings/General.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 6a8bae355..f68489f5d 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -138,6 +138,7 @@
 						on:change="{() => handleThemeChange(selectedTheme)}"
 					>
       			<option value="system">System</option>
+						<option value="system">⚙️ {$i18n.t('System')}</option>
 						<option value="dark">🌑 {$i18n.t('Dark')}</option>
 						<option value="light">☀️ {$i18n.t('Light')}</option>
 						<option value="rose-pine dark">🪻 {$i18n.t('Rosé Pine')}</option>

From 549408d8082f59fc9d5b32d9c69f1e0b1e5e0971 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sat, 16 Mar 2024 23:59:09 -0700
Subject: [PATCH 07/13] Add setContext import to +layout.svelte

---
 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 10d4af651..f084b0a3e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, setContext } from 'svelte';
 	import { config, user, setTheme, WEBUI_NAME } from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { Toaster, toast } from 'svelte-sonner';

From 41cb6d7a54f480d0f6094c9df62ee60fcc8075d8 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sun, 17 Mar 2024 00:06:59 -0700
Subject: [PATCH 08/13] remove duplicate "System" in select menu

---
 src/lib/components/chat/Settings/General.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index f68489f5d..23956e2d8 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -137,7 +137,6 @@
 						placeholder="Select a theme"
 						on:change="{() => handleThemeChange(selectedTheme)}"
 					>
-      			<option value="system">System</option>
 						<option value="system">⚙️ {$i18n.t('System')}</option>
 						<option value="dark">🌑 {$i18n.t('Dark')}</option>
 						<option value="light">☀️ {$i18n.t('Light')}</option>

From a57586a2b7f95d2d355a2a1b06aa6f7fcceb033a Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sun, 17 Mar 2024 00:25:33 -0700
Subject: [PATCH 09/13] use IIFE in app.html to prevent FOUC

---
 src/app.html | 56 +++++++++++++++++++++++++++-------------------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/app.html b/src/app.html
index 931db8aa5..69f1b56e1 100644
--- a/src/app.html
+++ b/src/app.html
@@ -8,34 +8,36 @@
 		<meta name="robots" content="noindex,nofollow" />
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
-			if (
-				localStorage.theme === 'light' ||
-				(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
-			) {
-				document.documentElement.classList.add('light');
-			} else if (localStorage.theme && localStorage.theme !== 'system') {
-				localStorage.theme.split(' ').forEach((e) => {
-					document.documentElement.classList.add(e);
-				});
-			} else if (localStorage.theme && localStorage.theme === 'system') {
-				systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-				document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
-			}
-			else {
-				document.documentElement.classList.add('dark');
-			}
-
-			window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
-				if (localStorage.theme === 'system') {
-					if (e.matches) {
-						document.documentElement.classList.add('dark');
-						document.documentElement.classList.remove('light');
-					} else {
-						document.documentElement.classList.add('light');
-						document.documentElement.classList.remove('dark');
-					}
+			(() => {
+				if (
+					localStorage.theme === 'light' ||
+					(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
+				) {
+					document.documentElement.classList.add('light');
+				} else if (localStorage.theme && localStorage.theme !== 'system') {
+					localStorage.theme.split(' ').forEach((e) => {
+						document.documentElement.classList.add(e);
+					});
+				} else if (localStorage.theme && localStorage.theme === 'system') {
+					systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+					document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
 				}
-			});
+				else {
+					document.documentElement.classList.add('dark');
+				}
+
+				window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
+					if (localStorage.theme === 'system') {
+						if (e.matches) {
+							document.documentElement.classList.add('dark');
+							document.documentElement.classList.remove('light');
+						} else {
+							document.documentElement.classList.add('light');
+							document.documentElement.classList.remove('dark');
+						}
+					}
+				});		
+			})();
 		</script>
 
 		%sveltekit.head%

From 3c01932a780bc991dd93eabdc91a63ddb7a1231b Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sun, 17 Mar 2024 01:00:38 -0700
Subject: [PATCH 10/13] run prettier

---
 src/app.html                                  |  5 +-
 .../components/chat/Settings/General.svelte   | 48 +++++++++----------
 src/lib/stores/index.ts                       |  2 +-
 src/routes/+layout.svelte                     |  2 +-
 4 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/app.html b/src/app.html
index 69f1b56e1..c52cff98c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -21,8 +21,7 @@
 				} else if (localStorage.theme && localStorage.theme === 'system') {
 					systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
 					document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
-				}
-				else {
+				} else {
 					document.documentElement.classList.add('dark');
 				}
 
@@ -36,7 +35,7 @@
 							document.documentElement.classList.remove('dark');
 						}
 					}
-				});		
+				});
 			})();
 		</script>
 
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 23956e2d8..b160815cf 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -19,7 +19,7 @@
 	let selectedTheme = 'system';
 	let actualTheme: string;
 	$: actualTheme = $theme;
-  
+
 	let languages = [];
 	let lang = $i18n.language;
 	let notificationEnabled = false;
@@ -27,26 +27,26 @@
 
 	let showAdvanced = false;
 
-	function applyTheme(theme: string) { // only apply visually
-        let themeToApply = theme;
-        if (theme === 'system') {
-            themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
+	function applyTheme(theme: string) {
+		let themeToApply = theme;
+		if (theme === 'system') {
+			themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
 
-        themes
-            .filter((e) => e !== themeToApply)
-            .forEach((e) => {
-                e.split(' ').forEach((e) => {
-                    document.documentElement.classList.remove(e);
-                });
-            });
+		themes
+			.filter((e) => e !== themeToApply)
+			.forEach((e) => {
+				e.split(' ').forEach((e) => {
+					document.documentElement.classList.remove(e);
+				});
+			});
 
-        themeToApply.split(' ').forEach((e) => {
-            document.documentElement.classList.add(e);
-        });
+		themeToApply.split(' ').forEach((e) => {
+			document.documentElement.classList.add(e);
+		});
 
-		console.log(theme)
-    }
+		console.log(theme);
+	}
 
 	const toggleNotification = async () => {
 		const permission = await Notification.requestPermission();
@@ -116,11 +116,11 @@
 	});
 
 	function handleThemeChange(newTheme: string) {
-        selectedTheme = newTheme;
-        setTheme(newTheme);
-        localStorage.setItem('theme', newTheme);
-        applyTheme(newTheme);
-    }
+		selectedTheme = newTheme;
+		setTheme(newTheme);
+		localStorage.setItem('theme', newTheme);
+		applyTheme(newTheme);
+	}
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
@@ -135,7 +135,7 @@
 						class=" dark:bg-gray-900 w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
 						bind:value={selectedTheme}
 						placeholder="Select a theme"
-						on:change="{() => handleThemeChange(selectedTheme)}"
+						on:change={() => handleThemeChange(selectedTheme)}
 					>
 						<option value="system">⚙️ {$i18n.t('System')}</option>
 						<option value="dark">🌑 {$i18n.t('Dark')}</option>
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 7b15cf1d9..a3efe8c21 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -24,7 +24,7 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e)
 	});
 });
 
-export function setTheme(theme){
+export function setTheme(theme) {
 	rawThemeSetting.set(theme);
 	localStorage.setItem('theme', theme);
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f084b0a3e..3a420c16d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,7 +18,7 @@
 	let loaded = false;
 
 	onMount(async () => {
-		setTheme(localStorage.theme)
+		setTheme(localStorage.theme);
 		// Check Backend Status
 		const backendConfig = await getBackendConfig();
 

From 94c845d71f8323c32c63e8b5adf60a648da4e40a Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 18 Mar 2024 00:27:48 -0700
Subject: [PATCH 11/13] refac

---
 .../components/chat/Settings/General.svelte   | 60 +++++++++----------
 src/lib/stores/index.ts                       | 22 +------
 src/routes/+layout.svelte                     |  4 +-
 3 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index b160815cf..8e6ccc508 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -4,8 +4,7 @@
 	import { getLanguages } from '$lib/i18n';
 	const dispatch = createEventDispatcher();
 
-	import { models, user } from '$lib/stores';
-	import { theme, setTheme } from '../../../stores/index';
+	import { models, user, theme } from '$lib/stores';
 
 	const i18n = getContext('i18n');
 
@@ -27,27 +26,6 @@
 
 	let showAdvanced = false;
 
-	function applyTheme(theme: string) {
-		let themeToApply = theme;
-		if (theme === 'system') {
-			themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-		}
-
-		themes
-			.filter((e) => e !== themeToApply)
-			.forEach((e) => {
-				e.split(' ').forEach((e) => {
-					document.documentElement.classList.remove(e);
-				});
-			});
-
-		themeToApply.split(' ').forEach((e) => {
-			document.documentElement.classList.add(e);
-		});
-
-		console.log(theme);
-	}
-
 	const toggleNotification = async () => {
 		const permission = await Notification.requestPermission();
 
@@ -115,12 +93,34 @@
 		options.stop = (settings?.options?.stop ?? []).join(',');
 	});
 
-	function handleThemeChange(newTheme: string) {
-		selectedTheme = newTheme;
-		setTheme(newTheme);
-		localStorage.setItem('theme', newTheme);
-		applyTheme(newTheme);
-	}
+	const applyTheme = (_theme: string) => {
+		let themeToApply = _theme;
+
+		if (_theme === 'system') {
+			themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+
+		themes
+			.filter((e) => e !== themeToApply)
+			.forEach((e) => {
+				e.split(' ').forEach((e) => {
+					document.documentElement.classList.remove(e);
+				});
+			});
+
+		themeToApply.split(' ').forEach((e) => {
+			document.documentElement.classList.add(e);
+		});
+
+		console.log(_theme);
+	};
+
+	const themeChangeHandler = (_theme: string) => {
+		theme.set(_theme);
+		localStorage.setItem('theme', _theme);
+
+		applyTheme(_theme);
+	};
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
@@ -135,7 +135,7 @@
 						class=" dark:bg-gray-900 w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
 						bind:value={selectedTheme}
 						placeholder="Select a theme"
-						on:change={() => handleThemeChange(selectedTheme)}
+						on:change={() => themeChangeHandler(selectedTheme)}
 					>
 						<option value="system">⚙️ {$i18n.t('System')}</option>
 						<option value="dark">🌑 {$i18n.t('Dark')}</option>
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index a3efe8c21..cd42a51ee 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -7,27 +7,7 @@ export const config = writable(undefined);
 export const user = writable(undefined);
 
 // Frontend
-const rawThemeSetting = writable('system');
-export const theme = derived(rawThemeSetting, ($rawThemeSetting) => {
-	if ($rawThemeSetting === 'system') {
-		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-	}
-	return $rawThemeSetting;
-});
-
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-	rawThemeSetting.update((currentTheme) => {
-		if (currentTheme === 'system') {
-			return e.matches ? 'dark' : 'light';
-		}
-		return currentTheme;
-	});
-});
-
-export function setTheme(theme) {
-	rawThemeSetting.set(theme);
-	localStorage.setItem('theme', theme);
-}
+export const theme = writable('system');
 
 export const chatId = writable('');
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3a420c16d..865155eee 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount, tick, setContext } from 'svelte';
-	import { config, user, setTheme, WEBUI_NAME } from '$lib/stores';
+	import { config, user, theme, WEBUI_NAME } from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { Toaster, toast } from 'svelte-sonner';
 
@@ -18,7 +18,7 @@
 	let loaded = false;
 
 	onMount(async () => {
-		setTheme(localStorage.theme);
+		theme.set(localStorage.theme);
 		// Check Backend Status
 		const backendConfig = await getBackendConfig();
 

From 8f8a68e002e600e0f32dc66c8e985021b541d018 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 18 Mar 2024 00:30:08 -0700
Subject: [PATCH 12/13] refac: unnecessary code

---
 src/lib/components/chat/Settings/General.svelte | 3 ---
 src/lib/stores/index.ts                         | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 8e6ccc508..a5b7aeb5d 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -16,8 +16,6 @@
 	// General
 	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
 	let selectedTheme = 'system';
-	let actualTheme: string;
-	$: actualTheme = $theme;
 
 	let languages = [];
 	let lang = $i18n.language;
@@ -72,7 +70,6 @@
 
 	onMount(async () => {
 		selectedTheme = localStorage.getItem('theme') ?? 'system';
-		applyTheme(selectedTheme);
 
 		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
 		languages = await getLanguages();
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index cd42a51ee..c0e38a21e 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -1,5 +1,5 @@
 import { APP_NAME } from '$lib/constants';
-import { writable, derived } from 'svelte/store';
+import { writable } from 'svelte/store';
 
 // Backend
 export const WEBUI_NAME = writable(APP_NAME);

From 19f69c821f3e0cb5582d9c9a9d36b78e4d3a5620 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 18 Mar 2024 00:31:43 -0700
Subject: [PATCH 13/13] refac: code convention

---
 src/lib/components/chat/Settings/General.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index a5b7aeb5d..35f777a78 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -69,7 +69,7 @@
 	};
 
 	onMount(async () => {
-		selectedTheme = localStorage.getItem('theme') ?? 'system';
+		selectedTheme = localStorage.theme ?? 'system';
 
 		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
 		languages = await getLanguages();