diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 12bb80bf3..6f7319589 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -333,6 +333,7 @@ main {
  */
 
 .navbar-brand {
+  --pngx-navbar-brand-shadow-rgb: 0, 0, 0;
   font-size: 1.0625rem;
   min-height: 64px;
   letter-spacing: -0.015em;
@@ -342,12 +343,12 @@ main {
     ::ng-deep .navbar-official-logo,
     .brand-mark,
     .brand-logo {
-      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
+      filter: drop-shadow(0 2px 3px rgba(var(--pngx-navbar-brand-shadow-rgb), .5));
     }
   }
 
   ::ng-deep .navbar-official-logo {
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
+    filter: drop-shadow(0 1px 2px rgba(var(--pngx-navbar-brand-shadow-rgb), .3));
     transition: filter .15s ease-in-out;
 
     @media screen and (max-width: 575.98px) {
@@ -396,6 +397,10 @@ main {
 
 }
 
+:host-context(.primary-light) .navbar-brand {
+  --pngx-navbar-brand-shadow-rgb: 255, 255, 255; // Light app color, use white shadow for dark text
+}
+
 :host ::ng-deep .navbar-official-logo {
   .leaf {
     fill: color-mix(in srgb, var(--pngx-primary-text-contrast) 70%, var(--bs-primary)) !important;