diff --git a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.js b/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.js
index 4decdc3d8ee5f0..ab32fb4cf6053a 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.js
+++ b/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.js
@@ -1,10 +1,32 @@
 import * as React from 'react';
 import { Select } from '@mui/base/Select';
 import { Option } from '@mui/base/Option';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function OverridingInternalSlot() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Select slots={{ listbox: 'ol' }} defaultValue="First option">
+    <Select
+      slots={{ listbox: 'ol' }}
+      slotProps={{
+        listbox: {
+          style: {
+            backgroundColor: isDarkMode ? 'black' : 'white',
+            padding: '8px 12px',
+            listStylePosition: 'inside',
+            boxSizing: 'border-box',
+          },
+        },
+      }}
+      defaultValue="First option"
+    >
       <Option value="First option">First option</Option>
       <Option value="Second option">Second option</Option>
     </Select>
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx b/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx
index 4decdc3d8ee5f0..ab32fb4cf6053a 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx
+++ b/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx
@@ -1,10 +1,32 @@
 import * as React from 'react';
 import { Select } from '@mui/base/Select';
 import { Option } from '@mui/base/Option';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function OverridingInternalSlot() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Select slots={{ listbox: 'ol' }} defaultValue="First option">
+    <Select
+      slots={{ listbox: 'ol' }}
+      slotProps={{
+        listbox: {
+          style: {
+            backgroundColor: isDarkMode ? 'black' : 'white',
+            padding: '8px 12px',
+            listStylePosition: 'inside',
+            boxSizing: 'border-box',
+          },
+        },
+      }}
+      defaultValue="First option"
+    >
       <Option value="First option">First option</Option>
       <Option value="Second option">Second option</Option>
     </Select>
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx.preview b/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx.preview
deleted file mode 100644
index 557a43d4e80095..00000000000000
--- a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-<Select slots={{ listbox: 'ol' }} defaultValue="First option">
-  <Option value="First option">First option</Option>
-  <Option value="Second option">Second option</Option>
-</Select>
\ No newline at end of file