ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-16 06:15:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refac: splash screen

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-07-02 12:51:03 +04:00
parent 40fc1a1f95
commit 1cc15e6470
1 changed files with 10 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/app.html
View file

@ -33,6 +33,7 @@
</script> </script>
<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
(() => { (() => {
const metaThemeColorTag = document.querySelector('meta[name="theme-color"]'); const metaThemeColorTag = document.querySelector('meta[name="theme-color"]');
@ -77,28 +78,17 @@
} }
} }
}); });
const isDarkMode = document.documentElement.classList.contains('dark');
function setSplashImage() { const logo = document.createElement('img');
const logo = document.getElementById('logo'); logo.id = 'logo';
const isDarkMode = document.documentElement.classList.contains('dark'); logo.style = "position: absolute; width: auto; height: 6rem; top: 44%; left: 50%; transform: translateX(-50%); display:block;";
logo.src = isDarkMode ? '/static/splash-dark.png' : '/static/splash.png';
if (isDarkMode) { document.addEventListener('DOMContentLoaded', function() {
const darkImage = new Image(); const splash = document.getElementById('splash-screen');
darkImage.src = '/static/splash-dark.png'; if (splash) splash.prepend(logo);
});
darkImage.onload = () => {
logo.src = '/static/splash-dark.png';
logo.style.filter = ''; // Ensure no inversion is applied if splash-dark.png exists
};
darkImage.onerror = () => {
logo.style.filter = 'invert(1)'; // Invert image if splash-dark.png is missing
};
}
}
// Runs after classes are assigned
window.onload = setSplashImage;
})(); })();
</script> </script>
@ -120,18 +110,6 @@
} }
</style> </style>
<img
id="logo"
style="
position: absolute;
width: auto;
height: 6rem;
top: 44%;
left: 50%;
transform: translateX(-50%);
"
src="/static/splash.png"
/>
<div <div
style=" style="