UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-16 05:24:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Set theme colors to fix white top bar for PWA

Browse Source
This commit is contained in:
Sebastian 2024-09-08 17:38:49 +02:00
parent 61ee4bd629
commit 2a04dd0f9b
No known key found for this signature in database
2 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app.html
View File

@ -8,6 +8,7 @@
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
/>
<meta name="theme-color" content="#171717" />
<meta name="robots" content="noindex,nofollow" />
<meta name="description" content="Open WebUI" />
<link
@ -26,33 +27,33 @@
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
(() => {
const metaThemeColorTag = document.querySelector('meta[name="theme-color"]');
const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (!localStorage?.theme) {
localStorage.theme = 'system';
}
if (localStorage?.theme && localStorage?.theme.includes('oled')) {
if (localStorage.theme === 'system') {
document.documentElement.classList.add(prefersDarkTheme ? 'dark' : 'light');
metaThemeColorTag.setAttribute('content', prefersDarkTheme ? '#171717' : '#ffffff');
} else if (localStorage.theme === 'oled-dark') {
document.documentElement.style.setProperty('--color-gray-800', '#101010');
document.documentElement.style.setProperty('--color-gray-850', '#050505');
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)
) {
metaThemeColorTag.setAttribute('content', '#000000');
} else if (localStorage.theme === 'light') {
document.documentElement.classList.add('light');
} else if (localStorage.theme && localStorage.theme !== 'system') {
localStorage.theme.split(' ').forEach((e) => {
document.documentElement.classList.add(e);
});
} else if (localStorage.theme && localStorage.theme === 'system') {
systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
} else if (localStorage.theme && localStorage.theme === 'her') {
metaThemeColorTag.setAttribute('content', '#ffffff');
} else if (localStorage.theme === 'her') {
document.documentElement.classList.add('dark');
document.documentElement.classList.add('her');
metaThemeColorTag.setAttribute('content', '#983724');
} else {
document.documentElement.classList.add('dark');
metaThemeColorTag.setAttribute('content', '#171717');
}
window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
@ -60,9 +61,11 @@
if (e.matches) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
metaThemeColorTag.setAttribute('content', '#171717');
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
metaThemeColorTag.setAttribute('content', '#ffffff');
}
}
});

23
src/lib/components/chat/Settings/General.svelte
View File

@ -114,6 +114,29 @@
document.documentElement.classList.add(e);
});
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
if (metaThemeColor) {
if (_theme.includes('system')) {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
console.log('Setting system meta theme color: ' + systemTheme);
metaThemeColor.setAttribute('content', systemTheme === 'light' ? '#ffffff' : '#171717');
} else {
console.log('Setting meta theme color: ' + _theme);
metaThemeColor.setAttribute(
'content',
_theme === 'dark'
? '#171717'
: _theme === 'oled-dark'
? '#000000'
: _theme === 'her'
? '#983724'
: '#ffffff'
);
}
}
console.log(_theme);
};