diff --git a/static/usage/v7/list/inset/angular.md b/static/usage/v7/list/inset/angular.md
index d88d56e77f1..cd94c838cb9 100644
--- a/static/usage/v7/list/inset/angular.md
+++ b/static/usage/v7/list/inset/angular.md
@@ -1,19 +1,21 @@
 ```html
-<ion-list [inset]="true">
-  <ion-item>
-    <ion-label>Pokémon Yellow</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>Mega Man X</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>The Legend of Zelda</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>Pac-Man</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>Super Mario World</ion-label>
-  </ion-item>
-</ion-list>
+<ion-content color="light">
+  <ion-list [inset]="true">
+    <ion-item>
+      <ion-label>Pokémon Yellow</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Mega Man X</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>The Legend of Zelda</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Pac-Man</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Super Mario World</ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>
 ```
diff --git a/static/usage/v7/list/inset/demo.html b/static/usage/v7/list/inset/demo.html
index 546fb33e456..7c124f4adb2 100644
--- a/static/usage/v7/list/inset/demo.html
+++ b/static/usage/v7/list/inset/demo.html
@@ -10,10 +10,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
     <style>
-      ion-content {
-        --background: #f9f9f9;
-      }
-
       .container {
         flex-flow: column;
         align-items: stretch;
@@ -23,7 +19,7 @@
 
   <body>
     <ion-app>
-      <ion-content>
+      <ion-content color="light">
         <div class="container">
           <ion-list inset>
             <ion-item>
diff --git a/static/usage/v7/list/inset/index.md b/static/usage/v7/list/inset/index.md
index 90a7e7c6a64..c77760038a7 100644
--- a/static/usage/v7/list/inset/index.md
+++ b/static/usage/v7/list/inset/index.md
@@ -5,4 +5,10 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/list/inset/demo.html" size="350px" />
+<Playground
+  version="7" 
+  code={{ javascript, react, vue, angular }} 
+  src="usage/v7/list/inset/demo.html" 
+  size="350px"
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/list/inset/javascript.md b/static/usage/v7/list/inset/javascript.md
index a5c6e28dd38..28766d76267 100644
--- a/static/usage/v7/list/inset/javascript.md
+++ b/static/usage/v7/list/inset/javascript.md
@@ -1,19 +1,21 @@
 ```html
-<ion-list inset="true">
-  <ion-item>
-    <ion-label>Pokémon Yellow</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>Mega Man X</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>The Legend of Zelda</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>Pac-Man</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>Super Mario World</ion-label>
-  </ion-item>
-</ion-list>
+<ion-content color="light">
+  <ion-list inset="true">
+    <ion-item>
+      <ion-label>Pokémon Yellow</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Mega Man X</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>The Legend of Zelda</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Pac-Man</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Super Mario World</ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>
 ```
diff --git a/static/usage/v7/list/inset/react.md b/static/usage/v7/list/inset/react.md
index d9f00d8a4f9..37e00fc1048 100644
--- a/static/usage/v7/list/inset/react.md
+++ b/static/usage/v7/list/inset/react.md
@@ -1,26 +1,28 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonLabel, IonList } from '@ionic/react';
+import { IonContent, IonItem, IonLabel, IonList } from '@ionic/react';
 
 function Example() {
   return (
-    <IonList inset={true}>
-      <IonItem>
-        <IonLabel>Pokémon Yellow</IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Mega Man X</IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel>The Legend of Zelda</IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Pac-Man</IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Super Mario World</IonLabel>
-      </IonItem>
-    </IonList>
+    <IonContent color="light">
+      <IonList inset={true}>
+        <IonItem>
+          <IonLabel>Pokémon Yellow</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Mega Man X</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>The Legend of Zelda</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Pac-Man</IonLabel>
+        </IonItem>
+        <IonItem>
+          <IonLabel>Super Mario World</IonLabel>
+        </IonItem>
+      </IonList>
+    </IonContent>
   );
 }
 export default Example;
diff --git a/static/usage/v7/list/inset/vue.md b/static/usage/v7/list/inset/vue.md
index 15d801c7eae..5391206549f 100644
--- a/static/usage/v7/list/inset/vue.md
+++ b/static/usage/v7/list/inset/vue.md
@@ -1,30 +1,32 @@
 ```html
 <template>
-  <ion-list :inset="true">
-    <ion-item>
-      <ion-label>Pokémon Yellow</ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-label>Mega Man X</ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-label>The Legend of Zelda</ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-label>Pac-Man</ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-label>Super Mario World</ion-label>
-    </ion-item>
-  </ion-list>
+  <ion-content color="light">
+    <ion-list :inset="true">
+      <ion-item>
+        <ion-label>Pokémon Yellow</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Mega Man X</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>The Legend of Zelda</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Pac-Man</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Super Mario World</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-content>
 </template>
 
 <script lang="ts">
-  import { IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { IonContent, IonItem, IonLabel, IonList } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonItem, IonLabel, IonList },
+    components: { IonContent, IonItem, IonLabel, IonList },
   });
 </script>
 ```
