diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.scss b/adev/src/app/features/references/api-items-section/api-items-section.component.scss
index 48149d62059..c47b1a5cb1a 100644
--- a/adev/src/app/features/references/api-items-section/api-items-section.component.scss
+++ b/adev/src/app/features/references/api-items-section/api-items-section.component.scss
@@ -79,12 +79,15 @@
 
 :host {
   --item-attr-base-mix: 80%;
+  --item-attr-text: var(--page-background);
 
   .docs-light-mode & {
     --item-attr-base-mix: 20%;
+    --item-attr-text: var(--primary-contrast);
   }
   @media screen and (prefers-color-scheme: light) {
     --item-attr-base-mix: 20%;
+    --item-attr-text: var(--primary-contrast);
   }
 }
 
@@ -110,7 +113,7 @@
       var(--symbolic-yellow) var(--item-attr-base-mix),
       var(--octonary-contrast)
     );
-    color: var(--page-background);
+    color: var(--item-attr-text);
   }
 
   &.adev-experimental {
@@ -119,7 +122,7 @@
       var(--symbolic-green) var(--item-attr-base-mix),
       var(--octonary-contrast)
     );
-    color: var(--page-background);
+    color: var(--item-attr-text);
   }
 
   &.adev-deprecated {