diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts
index 5f60c0e812df..a322d46470a4 100644
--- a/code/lib/theming/src/base.ts
+++ b/code/lib/theming/src/base.ts
@@ -47,6 +47,7 @@ export const background = {
   app: '#F6F9FC',
   bar: color.lightest,
   content: color.lightest,
+  preview: color.lightest,
   gridCellSize: 10,
   hoverable: transparentize(0.9, color.secondary), // hover state for items in a list
 
diff --git a/code/lib/theming/src/convert.ts b/code/lib/theming/src/convert.ts
index 05ecaaf1f322..fc23399d4a38 100644
--- a/code/lib/theming/src/convert.ts
+++ b/code/lib/theming/src/convert.ts
@@ -81,6 +81,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
     colorSecondary,
     appBg,
     appContentBg,
+    appPreviewBg,
     appBorderColor,
     appBorderRadius,
     fontBase,
@@ -116,6 +117,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
       app: appBg,
       bar: barBg,
       content: appContentBg,
+      preview: appPreviewBg,
       gridCellSize: gridCellSize || background.gridCellSize,
       hoverable: background.hoverable,
       positive: background.positive,
diff --git a/code/lib/theming/src/themes/dark.ts b/code/lib/theming/src/themes/dark.ts
index 49fea0807c25..4cb8f19f29bd 100644
--- a/code/lib/theming/src/themes/dark.ts
+++ b/code/lib/theming/src/themes/dark.ts
@@ -11,6 +11,7 @@ const theme: ThemeVars = {
   // UI
   appBg: '#222425',
   appContentBg: '#1B1C1D',
+  appPreviewBg: color.lightest,
   appBorderColor: 'rgba(255,255,255,.1)',
   appBorderRadius: 4,
 
diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts
index 88508b62b8c4..b6b7ca0b26b0 100644
--- a/code/lib/theming/src/themes/light.ts
+++ b/code/lib/theming/src/themes/light.ts
@@ -11,6 +11,7 @@ const theme: ThemeVars = {
   // UI
   appBg: background.app,
   appContentBg: color.lightest,
+  appPreviewBg: color.lightest,
   appBorderColor: color.border,
   appBorderRadius: 4,
 
diff --git a/code/lib/theming/src/types.ts b/code/lib/theming/src/types.ts
index b6f28f8c955f..e7c2827792cb 100644
--- a/code/lib/theming/src/types.ts
+++ b/code/lib/theming/src/types.ts
@@ -17,6 +17,7 @@ export interface ThemeVarsColors {
   // UI
   appBg: string;
   appContentBg: string;
+  appPreviewBg: string;
   appBorderColor: string;
   appBorderRadius: number;
 
diff --git a/code/ui/manager/src/components/preview/iframe.tsx b/code/ui/manager/src/components/preview/iframe.tsx
index 58b0c8c0dc8f..f4ac61c99d78 100644
--- a/code/ui/manager/src/components/preview/iframe.tsx
+++ b/code/ui/manager/src/components/preview/iframe.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Zoom } from '@storybook/components';
 
-const StyledIframe = styled.iframe({
-  backgroundColor: 'white',
+const StyledIframe = styled.iframe(({ theme }) => ({
+  backgroundColor: theme.background.preview,
   position: 'absolute',
   display: 'block',
   boxSizing: 'content-box',
@@ -13,7 +13,7 @@ const StyledIframe = styled.iframe({
   border: '0 none',
   transition: 'background-position 0s, visibility 0s',
   backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
-});
+}));
 
 export interface IFrameProps {
   id: string;
diff --git a/code/ui/manager/src/components/preview/utils/components.ts b/code/ui/manager/src/components/preview/utils/components.ts
index 2d8e80a30226..c2e784664f98 100644
--- a/code/ui/manager/src/components/preview/utils/components.ts
+++ b/code/ui/manager/src/components/preview/utils/components.ts
@@ -35,7 +35,6 @@ export const IframeWrapper = styled.div(({ theme }) => ({
   right: 0,
   width: '100%',
   height: '100%',
-  background: theme.background.content,
 }));
 
 export const LoaderWrapper = styled.div(({ theme }) => ({
@@ -44,6 +43,6 @@ export const LoaderWrapper = styled.div(({ theme }) => ({
   left: 0,
   bottom: 0,
   right: 0,
-  background: theme.background.content,
+  background: theme.background.preview,
   zIndex: 1,
 }));
diff --git a/docs/snippets/common/your-theme.js.mdx b/docs/snippets/common/your-theme.js.mdx
index 1fb3d2eeabbd..54ce8c5d37fd 100644
--- a/docs/snippets/common/your-theme.js.mdx
+++ b/docs/snippets/common/your-theme.js.mdx
@@ -21,6 +21,7 @@ export default create({
   // UI
   appBg: '#ffffff',
   appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
   appBorderColor: '#585C6D',
   appBorderRadius: 4,