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

Update theme options and persist OLED dark theme if selected

Browse source
This commit is contained in:
Danny Liu 2024-03-27 16:04:34 -07:00
parent c24d9d3bea
commit 25c71d8ac2
2 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app.html
View file

@ -9,7 +9,11 @@
<script> <script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC // On page load or when changing themes, best to add inline in `head` to avoid FOUC
(() => { (() => {
if ( if (localStorage.theme.includes('oled')) {
document.documentElement.style.setProperty('--color-gray-900', '#000000');
document.documentElement.classList.add('dark');
}
else if (
localStorage.theme === 'light' || localStorage.theme === 'light' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches) (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
) { ) {

21
src/lib/components/chat/Settings/General.svelte
View file

@ -14,7 +14,7 @@
export let getModels: Function; export let getModels: Function;
// General // General
let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light', 'oled']; let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light', 'oled-dark'];
let selectedTheme = 'system'; let selectedTheme = 'system';
let languages = []; let languages = [];
@ -93,11 +93,15 @@
const applyTheme = (_theme: string) => { const applyTheme = (_theme: string) => {
let themeToApply = _theme; let themeToApply = _theme;
if (themeToApply.includes('oled')) {
themeToApply = 'dark';
}
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';
} }
if (themeToApply === 'dark') { if (themeToApply === 'dark' && !_theme.includes('oled')) {
document.documentElement.style.setProperty('--color-gray-900', '#171717'); document.documentElement.style.setProperty('--color-gray-900', '#171717');
} }
@ -117,14 +121,13 @@
}; };
const themeChangeHandler = (_theme: string) => { const themeChangeHandler = (_theme: string) => {
if (_theme === 'oled') { theme.set(_theme);
localStorage.setItem('theme', _theme);
if (_theme.includes('oled')) {
document.documentElement.style.setProperty('--color-gray-900', '#000000'); document.documentElement.style.setProperty('--color-gray-900', '#000000');
} else { document.documentElement.classList.add('dark');
theme.set(_theme);
localStorage.setItem('theme', _theme);
applyTheme(_theme);
} }
applyTheme(_theme);
}; };
</script> </script>
@ -147,7 +150,7 @@
<option value="light">☀️ {$i18n.t('Light')}</option> <option value="light">☀️ {$i18n.t('Light')}</option>
<option value="rose-pine dark">🪻 {$i18n.t('Rosé Pine')}</option> <option value="rose-pine dark">🪻 {$i18n.t('Rosé Pine')}</option>
<option value="rose-pine-dawn light">🌷 {$i18n.t('Rosé Pine Dawn')}</option> <option value="rose-pine-dawn light">🌷 {$i18n.t('Rosé Pine Dawn')}</option>
<option value="oled">🌌 {$i18n.t('OLED Dark')}</option> <option value="oled-dark">🌌 {$i18n.t('OLED Dark')}</option>
</select> </select>
</div> </div>
</div> </div>