From 53dfffc289650777bd42501ed9563c4f5ca48a47 Mon Sep 17 00:00:00 2001
From: Mikei386 <44135113+Mikei386@users.noreply.github.com>
Date: Fri, 21 Aug 2026 16:38:34 +0200
Subject: [PATCH] Reveal animated Open WebUI background

---
 platform/openwebui/theme/custom.css | 34 ++++++++++++++++++++---------
 platform/openwebui/theme/loader.js  | 10 +++++++++
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/platform/openwebui/theme/custom.css b/platform/openwebui/theme/custom.css
index 94d59b7..401db80 100644
--- a/platform/openwebui/theme/custom.css
+++ b/platform/openwebui/theme/custom.css
@@ -12,9 +12,9 @@
 	--mike-ai-panel: rgba(15, 20, 32, 0.86);
 	--mike-ai-panel-strong: rgba(12, 16, 27, 0.96);
 	--mike-ai-border: rgba(148, 163, 184, 0.13);
-	--mike-ai-blue: rgba(59, 130, 246, 0.20);
-	--mike-ai-violet: rgba(139, 92, 246, 0.17);
-	--mike-ai-teal: rgba(20, 184, 166, 0.12);
+	--mike-ai-blue: rgba(59, 130, 246, 0.30);
+	--mike-ai-violet: rgba(139, 92, 246, 0.25);
+	--mike-ai-teal: rgba(20, 184, 166, 0.18);
 }
 
 html,
@@ -42,15 +42,29 @@ body {
 	isolation: isolate;
 }
 
-/* The large application surfaces are slightly translucent so the aurora is
- * visible, while content, dialogs and editors retain solid readable panels. */
-.dark #app .bg-gray-950,
-.dark #app .bg-gray-900,
-.dark #app .bg-gray-850 {
+/* Open WebUI's full-screen wrappers use Tailwind variant class names such as
+ * "dark:bg-gray-900".  They must be transparent or they hide the body theme. */
+.dark #app .app > [class~='dark:bg-gray-900'],
+.dark #auth-page > [class~='dark:bg-black'] {
+	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;
 	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 dialog,
 .dark pre,
@@ -62,8 +76,8 @@ body {
 
 .dark [role='dialog'],
 .dark dialog,
-.dark .border-gray-800,
-.dark .border-gray-850 {
+.dark [class~='dark:border-gray-800'],
+.dark [class~='dark:border-gray-850'] {
 	border-color: var(--mike-ai-border) !important;
 }
 
diff --git a/platform/openwebui/theme/loader.js b/platform/openwebui/theme/loader.js
index aa4feb4..de97f03 100644
--- a/platform/openwebui/theme/loader.js
+++ b/platform/openwebui/theme/loader.js
@@ -1,6 +1,16 @@
 /* Set Mike AI's global Open WebUI theme before the Svelte app mounts. */
 (() => {
 	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');
 		document.documentElement.classList.remove('light', 'her');
 		document.documentElement.classList.add('dark');