diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index a525affb..dfdcdb7b 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -202,7 +202,12 @@ const smallBanner = ref(false);
                 {{ title }}
               </q-tooltip>
             </span>
-            <span v-if="title" class="app-text-muted">{{ caption }}</span>
+            <span
+              v-if="title"
+              :class="$q.dark.isActive ? 'foreground' : 'app-text-muted'"
+            >
+              {{ caption }}
+            </span>
           </div>
 
           <!-- icon -->
@@ -213,7 +218,8 @@ const smallBanner = ref(false);
           >
             <span
               v-if="useToggle && toggleTitle"
-              class="q-mr-md app-text-muted-2"
+              class="q-mr-md"
+              :class="$q.dark.isActive ? 'foreground' : 'app-text-muted-2'"
             >
               {{ toggleTitle }}
             </span>
@@ -401,7 +407,8 @@ const smallBanner = ref(false);
         </span>
         <span
           v-if="title"
-          class="app-text-muted absolute"
+          class="absolute"
+          :class="$q.dark.isActive ? 'foreground' : 'app-text-muted'"
           style="font-size: 10px; bottom: 4px"
         >
           {{ caption }}