WEB-653 feat(login): add tenant-specific logo support for dark mode (#3074)

improve

src/app/login/login.component.html

@@ -81,7 +81,12 @@
           @if (!themeDarkEnabled) {
             <img [src]="logoPath" (error)="onLogoError()" alt="{{ 'APP_NAME' | translate }} Logo" class="logo-image" />
           } @else {
-            <img src="assets/images/white-mifos.png" alt="{{ 'APP_NAME' | translate }} Logo" class="logo-image" />
+            <img
+              [src]="logoPathDark"
+              (error)="onLogoErrorDark()"
+              alt="{{ 'APP_NAME' | translate }} Logo"
+              class="logo-image"
+            />
           }
         </div>
 

src/app/login/login.component.ts

@@ -105,6 +105,7 @@ export class LoginComponent implements OnInit, OnDestroy {
   /** Subscription to alerts. */
   alert$: Subscription;
   logoPath = 'assets/images/default_home.png';
+  logoPathDark = 'assets/images/white-mifos.png';
   /** Subscription to theme changes. */
   theme$: Subscription;
 
@@ -205,19 +206,29 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   updateLogo(): void {
+    const tenant = this.settingsService.tenantIdentifier;
+    const isTenantSpecific = tenant && tenant !== 'default';
+
+    // Set light mode logo (env override takes priority)
     if (environment.tenantLogoUrl && environment.tenantLogoUrl.trim() !== '') {
       this.logoPath = environment.tenantLogoUrl;
-      return;
-    }
-    const tenant = this.settingsService.tenantIdentifier;
-    if (tenant && tenant !== 'default') {
-      this.logoPath = `assets/images/${tenant}_home.png`;
     } else {
-      this.logoPath = 'assets/images/default_home.png';
+      this.logoPath = isTenantSpecific ? `assets/images/${tenant}_home.png` : 'assets/images/default_home.png';
+    }
+
+    // Set dark mode logo (env override takes priority)
+    if (environment.tenantLogoUrlDark && environment.tenantLogoUrlDark.trim() !== '') {
+      this.logoPathDark = environment.tenantLogoUrlDark;
+    } else {
+      this.logoPathDark = isTenantSpecific ? `assets/images/${tenant}_home_dark.png` : 'assets/images/white-mifos.png';
     }
   }
 
   onLogoError(): void {
     this.logoPath = 'assets/images/default_home.png';
   }
+
+  onLogoErrorDark(): void {
+    this.logoPathDark = 'assets/images/white-mifos.png';
+  }
 }

src/assets/env.js

@@ -21,6 +21,7 @@
   window["env"]["fineractPlatformTenantIds"]  = '';
 
   window['env']['tenantLogoUrl'] = '';
+  window['env']['tenantLogoUrlDark'] = '';
 
   // Language Environment variables
   window["env"]["defaultLanguage"] = '';

src/assets/env.template.js

@@ -25,6 +25,7 @@
   window['env']['fineractPlatformTenantIds'] = '$FINERACT_PLATFORM_TENANTS_IDENTIFIER';
 
   window['env']['tenantLogoUrl'] = '$TENANT_LOGO_URL';
+  window['env']['tenantLogoUrlDark'] = '$TENANT_LOGO_URL_DARK';
 
   // Language Environment variables
   window['env']['defaultLanguage'] = '$MIFOS_DEFAULT_LANGUAGE';

src/environments/environment.prod.ts

@@ -63,6 +63,7 @@ export const environment = {
   /** Production mode - when true, shows minimal hero with only branding at bottom */
   productionMode: loadedEnv['productionMode'] === 'true' || loadedEnv['productionMode'] === true || false,
   tenantLogoUrl: loadedEnv['tenantLogoUrl'] || 'assets/images/default_home.png',
+  tenantLogoUrlDark: loadedEnv['tenantLogoUrlDark'] || 'assets/images/white-mifos.png',
   documentationBaseUrl: loadedEnv['documentationBaseUrl'] || 'https://mifosforge.jira.com/wiki',
   // Time in seconds, default 60 seconds
   waitTimeForNotifications: loadedEnv['waitTimeForNotifications'] || 60,

src/environments/environment.ts

@@ -67,6 +67,7 @@ export const environment = {
   /** Production mode - when true, shows minimal hero with only branding at bottom */
   productionMode: loadedEnv.productionMode === 'true' || loadedEnv.productionMode === true || false,
   tenantLogoUrl: loadedEnv.tenantLogoUrl || 'assets/images/default_home.png',
+  tenantLogoUrlDark: loadedEnv.tenantLogoUrlDark || 'assets/images/white-mifos.png',
   documentationBaseUrl: loadedEnv.documentationBaseUrl || 'https://mifosforge.jira.com/wiki',
   // Time in seconds, default 60 seconds
   waitTimeForNotifications: loadedEnv.waitTimeForNotifications || 60,