This commit is contained in:
Timothy J. Baek 2024-03-18 00:27:48 -07:00
parent 3c01932a78
commit 94c845d71f
3 changed files with 33 additions and 53 deletions

View file

@ -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>

View file

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

View file

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