Add global Midnight Aurora Open WebUI theme

README.md

@@ -51,6 +51,12 @@ ARR- und Unraid-Werkzeuge besitzen dagegen bereits getrennte Container unter
 Infrastruktur-Secrets. Die Bildanalyse ist Bestandteil des multimodalen
 Qwen-Modells.
 
+Open WebUI erhält über die vorgesehenen statischen Anpassungspunkte ein globales
+Dark-Theme namens **Midnight Aurora**. CSS und Start-Loader liegen unter
+`platform/openwebui/theme/` und werden schreibgeschützt in den Container
+eingebunden. Der Hintergrund bewegt sich bewusst langsam; Browser mit aktivierter
+Option „Bewegung reduzieren“ erhalten automatisch eine unbewegte Variante.
+
 ## Dokumentation
 
 - [Roadmap für den neuen Host](docs/NEW_HOST_ROADMAP.md)

compose.yaml

@@ -342,6 +342,10 @@ services:
     restart: unless-stopped
     volumes:
       - open-webui-data:/app/backend/data
+      # Upstream-supported static customization hooks. Keeping these files in
+      # the repository makes the global dark theme reproducible and update-safe.
+      - ./platform/openwebui/theme/custom.css:/app/build/static/custom.css:ro
+      - ./platform/openwebui/theme/loader.js:/app/build/static/loader.js:ro
     environment:
       WEBUI_SECRET_KEY: "${WEBUI_SECRET_KEY:?WEBUI_SECRET_KEY is required}"
       OLLAMA_BASE_URL: ""

platform/openwebui/theme/custom.css

@@ -0,0 +1,100 @@
+/*
+ * Mike AI "Midnight Aurora" theme for Open WebUI.
+ *
+ * Open WebUI deliberately loads /static/custom.css from its base image.  The
+ * file is mounted read-only by compose.yaml, so the theme survives container
+ * recreation and image updates without modifying the upstream image.
+ */
+
+:root {
+	color-scheme: dark;
+	--mike-ai-bg: #070a12;
+	--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);
+}
+
+html,
+body {
+	background-color: var(--mike-ai-bg) !important;
+}
+
+body {
+	min-height: 100vh;
+	background-image:
+		radial-gradient(circle at 12% 18%, var(--mike-ai-blue) 0, transparent 32%),
+		radial-gradient(circle at 88% 12%, var(--mike-ai-violet) 0, transparent 30%),
+		radial-gradient(circle at 68% 88%, var(--mike-ai-teal) 0, transparent 34%),
+		linear-gradient(145deg, #070a12 0%, #0b1020 52%, #080b14 100%) !important;
+	background-attachment: fixed !important;
+	background-position: 0% 30%, 100% 0%, 60% 100%, center !important;
+	background-size: 150% 150%, 145% 145%, 155% 155%, cover !important;
+	animation: mike-ai-aurora 30s ease-in-out infinite alternate;
+}
+
+/* Keep the app above the decorative background without intercepting clicks. */
+#app {
+	position: relative;
+	min-height: 100vh;
+	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 {
+	background-color: var(--mike-ai-panel) !important;
+	backdrop-filter: blur(18px) saturate(115%);
+}
+
+.dark [role='dialog'],
+.dark dialog,
+.dark pre,
+.dark textarea,
+.dark input,
+.dark select {
+	background-color: var(--mike-ai-panel-strong);
+}
+
+.dark [role='dialog'],
+.dark dialog,
+.dark .border-gray-800,
+.dark .border-gray-850 {
+	border-color: var(--mike-ai-border) !important;
+}
+
+/* A restrained accent for focused controls; no neon-glow or reduced contrast. */
+.dark :is(button, a, input, textarea, select):focus-visible {
+	outline-color: rgba(96, 165, 250, 0.78) !important;
+	outline-offset: 2px;
+}
+
+@keyframes mike-ai-aurora {
+	0% {
+		background-position: 0% 20%, 100% 0%, 65% 100%, center;
+	}
+	50% {
+		background-position: 18% 36%, 84% 14%, 48% 82%, center;
+	}
+	100% {
+		background-position: 4% 48%, 96% 28%, 72% 70%, center;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	body {
+		animation: none !important;
+	}
+}
+
+@media (max-width: 768px) {
+	body {
+		/* Less compositing work and a calmer background on tablets and phones. */
+		background-size: 125% 125%, 125% 125%, 135% 135%, cover !important;
+		animation-duration: 40s;
+	}
+}

platform/openwebui/theme/loader.js

@@ -0,0 +1,15 @@
+/* Set Mike AI's global Open WebUI theme before the Svelte app mounts. */
+(() => {
+	try {
+		localStorage.setItem('theme', 'dark');
+		document.documentElement.classList.remove('light', 'her');
+		document.documentElement.classList.add('dark');
+		document.documentElement.style.colorScheme = 'dark';
+
+		const themeColor = document.querySelector('meta[name="theme-color"]');
+		if (themeColor) themeColor.setAttribute('content', '#070a12');
+	} catch (_) {
+		/* Storage can be unavailable in locked-down/private browser contexts. */
+		document.documentElement.classList.add('dark');
+	}
+})();