diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css
index ef0b5f8bc9..29d4c7cbbe 100644
--- a/core/src/themes/test/css-variables/css/dark.css
+++ b/core/src/themes/test/css-variables/css/dark.css
@@ -132,4 +132,5 @@ ion-modal.ios {
   --ion-background-color: var(--ion-color-step-100);
   --ion-toolbar-background: var(--ion-color-step-150);
   --ion-toolbar-border-color: var(--ion-color-step-250);
+  --ion-item-background: var(--ion-color-step-150);
 }
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index e3337995c0..5bcb3bbdba 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -924,6 +924,9 @@
       <ion-header translucent="true">
         <ion-toolbar>
           <ion-title>Super Modal</ion-title>
+          <ion-buttons slot="start">
+            <ion-button class="dismiss">Close</ion-button>
+          </ion-buttons>
         </ion-toolbar>
       </ion-header>
       <ion-content fullscreen="true">
@@ -932,10 +935,21 @@
             <ion-title size="large">Super Modal</ion-title>
           </ion-toolbar>
         </ion-header>
-        <div class="ion-padding">
-          <h1>Content of doom</h1>
-          <div>Here's some more content</div>
-          <ion-button class="dismiss">Dismiss Modal</ion-button>
+
+        <br />
+
+        <div>
+          <ion-list>
+            <ion-item>
+              <ion-label>Item A</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Item B</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Item C</ion-label>
+            </ion-item>
+          </ion-list>
         </div>
       </ion-content>
       `;