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