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

src/lib/components/chat/Settings/General.svelte

@@ -27,26 +27,26 @@
 
 	let showAdvanced = false;
 
-	function applyTheme(theme: string) { // only apply visually
+	function applyTheme(theme: string) {
-        let themeToApply = theme;
+		let themeToApply = theme;
-        if (theme === 'system') {
+		if (theme === 'system') {
-            themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+			themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
+		}
 
-        themes
+		themes
-            .filter((e) => e !== themeToApply)
+			.filter((e) => e !== themeToApply)
-            .forEach((e) => {
+			.forEach((e) => {
-                e.split(' ').forEach((e) => {
+				e.split(' ').forEach((e) => {
-                    document.documentElement.classList.remove(e);
+					document.documentElement.classList.remove(e);
-                });
+				});
-            });
+			});
 
-        themeToApply.split(' ').forEach((e) => {
+		themeToApply.split(' ').forEach((e) => {
-            document.documentElement.classList.add(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;
+		selectedTheme = newTheme;
-        setTheme(newTheme);
+		setTheme(newTheme);
-        localStorage.setItem('theme', newTheme);
+		localStorage.setItem('theme', newTheme);
-        applyTheme(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>

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

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