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

Merge pull request #1325 from dannyl1u/feat/oled-dark-theme

Browse source 
feat: OLED dark theme
This commit is contained in:
Timothy Jaeryang Baek 2024-03-27 23:54:07 -07:00 • committed by GitHub
commit 46e3208cde
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/app.html
View file

@ -9,7 +9,12 @@
<script>
// 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.style.setProperty('--color-gray-950', '#000000');
document.documentElement.classList.add('dark');
}
else if (
localStorage.theme === 'light' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
) {

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

@ -14,7 +14,7 @@
export let getModels: Function;
// General
let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light', 'oled-dark'];
let selectedTheme = 'system';
let languages = [];
@ -91,12 +91,17 @@
});
const applyTheme = (_theme: string) => {
let themeToApply = _theme;
let themeToApply = _theme === 'oled-dark' ? 'dark' : _theme;
if (_theme === 'system') {
themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
if (themeToApply === 'dark' && !_theme.includes('oled')) {
document.documentElement.style.setProperty('--color-gray-900', '#171717');
document.documentElement.style.setProperty('--color-gray-950', '#0d0d0d');
}
themes
.filter((e) => e !== themeToApply)
.forEach((e) => {
@ -115,7 +120,11 @@
const themeChangeHandler = (_theme: string) => {
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-950', '#000000');
document.documentElement.classList.add('dark');
}
applyTheme(_theme);
};
</script>
@ -136,6 +145,7 @@
>
<option value="system">⚙️ {$i18n.t('System')}</option>
<option value="dark">🌑 {$i18n.t('Dark')}</option>
<option value="oled-dark">🌃 {$i18n.t('OLED Dark')}</option>
<option value="light">☀️ {$i18n.t('Light')}</option>
<option value="rose-pine dark">🪻 {$i18n.t('Rosé Pine')}</option>
<option value="rose-pine-dawn light">🌷 {$i18n.t('Rosé Pine Dawn')}</option>

5
tailwind.config.js
View file

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