diff --git a/docs/src/components/productX/XChartsDemo.tsx b/docs/src/components/productX/XChartsDemo.tsx
index 7345495426eaaa..a72bee98199e32 100644
--- a/docs/src/components/productX/XChartsDemo.tsx
+++ b/docs/src/components/productX/XChartsDemo.tsx
@@ -54,7 +54,7 @@ export default function XChartsDemo() {
           </Box>
         </Paper>
       </Frame.Demo>
-      <Frame.Info sx={{ maxHeight: 300, overflow: 'auto' }}>
+      <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
         <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
       </Frame.Info>
     </Frame>
diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx
index 896219422d3959..720baec494a5fb 100644
--- a/docs/src/components/productX/XDateRangeDemo.tsx
+++ b/docs/src/components/productX/XDateRangeDemo.tsx
@@ -186,7 +186,7 @@ export default function XDateRangeDemo() {
           </LocalizationProvider>
         </Paper>
       </Frame.Demo>
-      <Frame.Info sx={{ maxHeight: 300, overflow: 'auto' }}>
+      <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
         <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
       </Frame.Info>
     </Frame>
diff --git a/docs/src/components/productX/XTreeViewDemo.tsx b/docs/src/components/productX/XTreeViewDemo.tsx
index dbf4347996216c..5b8437a8a51c8e 100644
--- a/docs/src/components/productX/XTreeViewDemo.tsx
+++ b/docs/src/components/productX/XTreeViewDemo.tsx
@@ -329,7 +329,7 @@ export default function XDateRangeDemo() {
           </TreeView>
         </Paper>
       </Frame.Demo>
-      <Frame.Info sx={{ maxHeight: 300, overflow: 'auto' }}>
+      <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
         <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
       </Frame.Info>
     </Frame>