Reveal animated Open WebUI background

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-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,
@@ -42,15 +42,29 @@ body {
 	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;
 	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 [class~='dark:border-gray-800'],
-.dark .border-gray-850 {
+.dark [class~='dark:border-gray-850'] {
 	border-color: var(--mike-ai-border) !important;
 }
 

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');