refac

backend/open_webui/main.py

@@ -420,7 +420,7 @@ oauth_manager = OAuthManager(app)
 app.state.config = AppConfig()
 
 app.state.WEBUI_NAME = WEBUI_NAME
-app.state.LICENSE_DATA = None
+app.state.LICENSE_METADATA = None
 
 ########################################
 #
@@ -1218,7 +1218,7 @@ async def get_app_config(request: Request):
                     {
                         "record_count": user_count,
                         "active_entries": app.state.USER_COUNT,
-                        "license_data": app.state.LICENSE_DATA,
+                        "license_metadata": app.state.LICENSE_METADATA,
                     }
                     if user.role == "admin"
                     else {}

src/lib/components/OnBoarding.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { WEBUI_BASE_URL } from '$lib/constants';
@@ -10,6 +10,32 @@
 
 	export let show = true;
 	export let getStartedHandler = () => {};
+
+	function setLogoImage() {
+		const logo = document.getElementById('logo');
+
+		if (logo) {
+			const isDarkMode = document.documentElement.classList.contains('dark');
+
+			if (isDarkMode) {
+				const darkImage = new Image();
+				darkImage.src = '/static/favicon-dark.png';
+
+				darkImage.onload = () => {
+					logo.src = '/static/favicon-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
+				};
+			}
+		}
+	}
+
+	$: if (show) {
+		setLogoImage();
+	}
 </script>
 
 {#if show}
@@ -18,6 +44,7 @@
 			<div class="flex space-x-2">
 				<div class=" self-center">
 					<img
+						id="logo"
 						crossorigin="anonymous"
 						src="{WEBUI_BASE_URL}/static/favicon.png"
 						class=" w-6 rounded-full"

src/routes/auth/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { toast } from 'svelte-sonner';
 
-	import { onMount, getContext } from 'svelte';
+	import { onMount, getContext, tick } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
@@ -115,6 +115,29 @@
 
 	let onboarding = false;
 
+	async function setLogoImage() {
+		await tick();
+		const logo = document.getElementById('logo');
+
+		if (logo) {
+			const isDarkMode = document.documentElement.classList.contains('dark');
+
+			if (isDarkMode) {
+				const darkImage = new Image();
+				darkImage.src = '/static/favicon-dark.png';
+
+				darkImage.onload = () => {
+					logo.src = '/static/favicon-dark.png';
+					logo.style.filter = ''; // Ensure no inversion is applied if favicon-dark.png exists
+				};
+
+				darkImage.onerror = () => {
+					logo.style.filter = 'invert(1)'; // Invert image if favicon-dark.png is missing
+				};
+			}
+		}
+	}
+
 	onMount(async () => {
 		if ($user !== undefined) {
 			await goto('/');
@@ -122,6 +145,8 @@
 		await checkOauthCallback();
 
 		loaded = true;
+		setLogoImage();
+
 		if (($config?.features.auth_trusted_header ?? false) || $config?.features.auth === false) {
 			await signInHandler();
 		} else {
@@ -154,9 +179,10 @@
 			<div class="flex space-x-2">
 				<div class=" self-center">
 					<img
+						id="logo"
 						crossorigin="anonymous"
 						src="{WEBUI_BASE_URL}/static/splash.png"
-						class=" w-6 rounded-full dark:invert"
+						class=" w-6 rounded-full"
 						alt="logo"
 					/>
 				</div>