diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
index 7a0000746e76b6..0fa3ed548afea2 100644
--- a/docs/src/components/markdown/MarkdownElement.tsx
+++ b/docs/src/components/markdown/MarkdownElement.tsx
@@ -10,7 +10,7 @@ const Root = styled('div')(({ theme }) => ({
   ...theme.typography.caption,
   color: (theme.vars || theme).palette.text.primary,
   '& pre': {
-    backgroundColor: 'hsl(210, 20%, 10%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+    backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
     color: '#f8f8f2', // fallback color until Prism's theme is loaded
     overflow: 'auto',
     margin: 0,
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index 52aa7f82b6f8ae..a73d74799d6c35 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -16,7 +16,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxHeight: 'min(68vh, 1000px)',
       overflow: 'auto',
       marginTop: -1,
-      backgroundColor: 'hsl(210, 20%, 10%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+      backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
       border: `1px solid ${(theme.vars || theme).palette.divider}`,
       colorScheme: 'dark',
       '&:hover': {
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 09e352852e5a13..7554dd0820ceac 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -24,7 +24,7 @@ const Root = styled('div')(
       lineHeight: 1.5, // Developers like when the code is dense.
       margin: theme.spacing(2, 'auto'),
       padding: theme.spacing(2),
-      backgroundColor: 'hsl(210, 20%, 10%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+      backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
       color: 'hsl(60, 30%, 96%)',
       colorScheme: 'dark',
       borderRadius: `var(--muidocs-shape-borderRadius, ${
@@ -540,7 +540,7 @@ const Root = styled('div')(
       fontWeight: 500,
       borderRadius: 6,
       border: 'none',
-      backgroundColor: 'hsl(210, 20%, 10%)', // using the code block one-off background color (defined in line 23)
+      backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23)
       color: '#FFF',
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index 4a7cc575dd15df..60ddb10417cd1f 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -205,7 +205,7 @@ export default function ThemeViewer({
       sx={{
         color: '#FFF',
         p: 1.5,
-        bgcolor: 'hsl(210, 20%, 10%)', // one-off code container color
+        bgcolor: 'hsl(210, 35%, 9%)', // one-off code container color
         borderRadius: 3,
         border: `1px solid ${blueDark[700]}`,
       }}