tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

fix: custom theme light/dark support

Browse source
This commit is contained in:
Timothy J. Baek 2024-01-01 19:36:09 -08:00
parent 78f120566f
commit 6a92652ca1
2 changed files with 12 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app.html
View file

@ -15,8 +15,9 @@
} else if (localStorage.theme === 'dark') { } else if (localStorage.theme === 'dark') {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
} else { } else {
document.documentElement.classList.add('dark'); localStorage.theme.split(' ').forEach((e) => {
document.documentElement.classList.add(localStorage.theme); document.documentElement.classList.add(e);
});
} }
</script> </script>

18
src/lib/components/chat/SettingsModal.svelte
View file

@ -34,7 +34,7 @@
// General // General
let API_BASE_URL = OLLAMA_API_BASE_URL; let API_BASE_URL = OLLAMA_API_BASE_URL;
let themes = ['dark', 'light', 'rose-pine', 'rose-pine-dawn']; let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
let theme = 'dark'; let theme = 'dark';
let notificationEnabled = false; let notificationEnabled = false;
let system = ''; let system = '';
@ -994,22 +994,22 @@
themes themes
.filter((e) => e !== theme) .filter((e) => e !== theme)
.forEach((e) => { .forEach((e) => {
document.documentElement.classList.remove(e); e.split(' ').forEach((e) => {
document.documentElement.classList.remove(e);
});
}); });
document.documentElement.classList.add(theme); theme.split(' ').forEach((e) => {
document.documentElement.classList.add(e);
if (!['light', 'dark'].includes(theme)) { });
document.documentElement.classList.add('dark');
}
console.log(theme); console.log(theme);
}} }}
> >
<option value="dark">Dark</option> <option value="dark">Dark</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="rose-pine">Rosé Pine</option> <option value="rose-pine dark">Rosé Pine</option>
<option value="rose-pine-dawn">Rosé Pine Dawn</option> <option value="rose-pine-dawn light">Rosé Pine Dawn</option>
</select> </select>
</div> </div>
</div> </div>