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 { models, user, theme } from '$lib/stores';
-	import { theme, setTheme } from '../../../stores/index';
 
 	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) {
+	const applyTheme = (_theme: string) => {
-		selectedTheme = newTheme;
+		let themeToApply = _theme;
-		setTheme(newTheme);
+
-		localStorage.setItem('theme', newTheme);
+		if (_theme === 'system') {
-		applyTheme(newTheme);
+			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>

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 = 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('');
 

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