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

feat: OLED dark theme

Browse source
This commit is contained in:
Danny Liu 2024-03-27 10:50:30 -07:00
parent 7d45d2762f
commit 976c714063
2 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -97,6 +97,10 @@
themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
} }
if (themeToApply === 'dark') {
document.documentElement.style.setProperty('--color-gray-900', '#171717');
}
themes themes
.filter((e) => e !== themeToApply) .filter((e) => e !== themeToApply)
.forEach((e) => { .forEach((e) => {
@ -113,10 +117,14 @@
}; };
const themeChangeHandler = (_theme: string) => { const themeChangeHandler = (_theme: string) => {
theme.set(_theme); if (_theme === 'oled') {
localStorage.setItem('theme', _theme); document.documentElement.style.setProperty('--color-gray-900', '#000000');
} else {
theme.set(_theme);
localStorage.setItem('theme', _theme);
applyTheme(_theme); applyTheme(_theme);
}
}; };
</script> </script>
@ -139,6 +147,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>
</select> </select>
</div> </div>
</div> </div>

3
tailwind.config.js
View file

@ -16,8 +16,7 @@ export default {
700: '#4e4e4e', 700: '#4e4e4e',
800: '#333', 800: '#333',
850: '#262626', 850: '#262626',
900: 'var(--color-gray-900, #171717)',
900: '#171717',
950: '#0d0d0d' 950: '#0d0d0d'
} }
}, },