michael/AI-Profile-Router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reveal animated Open WebUI background

Browse Source
This commit is contained in:
Mikei386
2026-08-21 16:38:34 +02:00
parent c0cbeb0f15
commit 53dfffc289
2 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/openwebui/theme/custom.css
+24 -10
View File
@@ -12,9 +12,9 @@
--mike-ai-panel: rgba(15, 20, 32, 0.86); --mike-ai-panel: rgba(15, 20, 32, 0.86);
--mike-ai-panel-strong: rgba(12, 16, 27, 0.96); --mike-ai-panel-strong: rgba(12, 16, 27, 0.96);
--mike-ai-border: rgba(148, 163, 184, 0.13); --mike-ai-border: rgba(148, 163, 184, 0.13);
--mike-ai-blue: rgba(59, 130, 246, 0.20); --mike-ai-blue: rgba(59, 130, 246, 0.30);
--mike-ai-violet: rgba(139, 92, 246, 0.17); --mike-ai-violet: rgba(139, 92, 246, 0.25);
--mike-ai-teal: rgba(20, 184, 166, 0.12); --mike-ai-teal: rgba(20, 184, 166, 0.18);
} }
html, html,
@@ -42,15 +42,29 @@ body {
isolation: isolate; isolation: isolate;
} }
/* The large application surfaces are slightly translucent so the aurora is /* Open WebUI's full-screen wrappers use Tailwind variant class names such as
* visible, while content, dialogs and editors retain solid readable panels. */ * "dark:bg-gray-900". They must be transparent or they hide the body theme. */
.dark #app .bg-gray-950, .dark #app .app > [class~='dark:bg-gray-900'],
.dark #app .bg-gray-900, .dark #auth-page > [class~='dark:bg-black'] {
.dark #app .bg-gray-850 { background-color: transparent !important;
}
/* The remaining large application surfaces are slightly translucent so the
* aurora is visible, while content, dialogs and editors stay readable. */
.dark #app [class~='dark:bg-gray-950'],
.dark #app [class~='dark:bg-gray-900'],
.dark #app [class~='dark:bg-gray-850'] {
background-color: var(--mike-ai-panel) !important; background-color: var(--mike-ai-panel) !important;
backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%);
} }
/* The two full-screen wrappers above need to win over the general panel rule. */
.dark #app .app > [class~='dark:bg-gray-900'],
.dark #auth-page > [class~='dark:bg-black'] {
background-color: transparent !important;
backdrop-filter: none;
}
.dark [role='dialog'], .dark [role='dialog'],
.dark dialog, .dark dialog,
.dark pre, .dark pre,
@@ -62,8 +76,8 @@ body {
.dark [role='dialog'], .dark [role='dialog'],
.dark dialog, .dark dialog,
.dark .border-gray-800, .dark [class~='dark:border-gray-800'],
.dark .border-gray-850 { .dark [class~='dark:border-gray-850'] {
border-color: var(--mike-ai-border) !important; border-color: var(--mike-ai-border) !important;
} }
platform/openwebui/theme/loader.js
+10
View File
@@ -1,6 +1,16 @@
/* Set Mike AI's global Open WebUI theme before the Svelte app mounts. */ /* Set Mike AI's global Open WebUI theme before the Svelte app mounts. */
(() => { (() => {
try { try {
/* The upstream static route is aggressively cached by browsers. Give the
* mounted theme its own versioned URL so theme releases update reliably. */
const themeStylesheet = document.querySelector('link[href^="/static/custom.css"]');
if (themeStylesheet) {
themeStylesheet.setAttribute(
'href',
'/static/custom.css?theme=midnight-aurora-v2'
);
}
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
document.documentElement.classList.remove('light', 'her'); document.documentElement.classList.remove('light', 'her');
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');