diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css
index 62642ce9..686417ad 100644
--- a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css
+++ b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css
@@ -1,5 +1,4 @@
 .content {
-  background-color: #F7F7F7;
   height: 100%;
   overflow-y: auto;
 }
@@ -20,7 +19,6 @@
 }
 
 .details-sub {
-  color: var(--bs-gray-700);
   padding: 0;
   font-size: 0.875rem;
 }
@@ -51,7 +49,8 @@
 
 
 .keywords a, a.dir-link {
-  color: var(--bs-gray-900);
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
 }
 
 .keywords a:hover, a.dir-link:hover {
diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
index bd3e1503..92b27afa 100644
--- a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
+++ b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
@@ -1,4 +1,4 @@
-<div class="content d-flex flex-column">
+<div class="content d-flex flex-column bg-body">
   <div class="modal-header">
     <h2 class="modal-title" i18n>Info</h2>
     <button type="button"  class="btn-close"  (click)="close()" aria-label="Close">
@@ -25,7 +25,7 @@
       <div class="details-main" >
         {{media.name}}
       </div>
-      <div class="details-sub row">
+      <div class="details-sub text-secondary row">
         <div class="col-4">{{media.metadata.size.width}} x {{media.metadata.size.height}}</div>
         <div class="col-4" *ngIf="isPhoto()">{{calcMpx()}}MP</div>
         <div class="col-4" *ngIf="media.metadata.fileSize">{{media.metadata.fileSize | fileSize}}</div>
@@ -41,7 +41,7 @@
       <div class="details-main">
         {{ media.metadata.creationDate | date: (isThisYear() ? 'MMMM d' : 'longDate') : 'UTC' }}
       </div>
-      <div class="details-sub row">
+      <div class="details-sub  text-secondary row">
         <div class="col-12">{{ media.metadata.creationDate | date : 'EEEE, HH:mm:ss' : 'UTC' }}</div>
       </div>
     </div>
@@ -56,7 +56,7 @@
       <div class="details-main">
         {{"Video"}}
       </div>
-      <div class="details-sub row">
+      <div class="details-sub  text-secondary row">
         <div class="col-6" *ngIf="VideoData.duration">
           <ng-container i18n>duration</ng-container>
           : {{VideoData.duration | duration}}</div>
@@ -80,7 +80,7 @@
       <div class="details-main">
         {{CameraData.model || CameraData.make || "Camera"}}
       </div>
-      <div class="details-sub row">
+      <div class="details-sub  text-secondary row">
         <div class="col-3" *ngIf="CameraData.ISO">ISO{{CameraData.ISO}}</div>
         <div class="col-3" *ngIf="CameraData.fStop">f/{{CameraData.fStop}}</div>
         <div class="col-3" *ngIf="CameraData.exposure">
@@ -136,7 +136,7 @@
       <div class="details-main">
         {{getPositionText() || "Position"}}
       </div>
-      <div class="details-sub row" *ngIf="hasGPS()">
+      <div class="details-sub text-secondary row" *ngIf="hasGPS()">
         <div class="col-12">
           {{PositionData.GPSData.latitude.toFixed(6)}},
           {{PositionData.GPSData.longitude.toFixed(6)}}