diff --git a/applications/mail/src/app/styles/_message.scss b/applications/mail/src/app/styles/_message.scss
index 663caf40fd2..35f1ce0571b 100644
--- a/applications/mail/src/app/styles/_message.scss
+++ b/applications/mail/src/app/styles/_message.scss
@@ -436,7 +436,7 @@ $container-to-width: 4em !default;
 	}
 
 	&.dark-style {
-		background: white;
+		background: #0d0a1c;
 	}
 }
 
diff --git a/packages/components/components/editor/rooster/RoosterEditorIframe.raw.scss b/packages/components/components/editor/rooster/RoosterEditorIframe.raw.scss
index 794b81b171f..0eac5ac1fea 100644
--- a/packages/components/components/editor/rooster/RoosterEditorIframe.raw.scss
+++ b/packages/components/components/editor/rooster/RoosterEditorIframe.raw.scss
@@ -165,7 +165,7 @@ body {
 	font-size: 0.875rem; /* 14 */
 	line-height: 1.5; // Need to be bigger so that we don't have jumps when adding emojis
 	color: black;
-	background: white;
+	background: var(--background-norm);
 
 	// to avoid overscrolling in case of reply to an email with a bg color set on body
 	overscroll-behavior: none;
diff --git a/packages/components/containers/themes/properties.ts b/packages/components/containers/themes/properties.ts
index 9d93184b8fc..168fa1a5e5d 100644
--- a/packages/components/containers/themes/properties.ts
+++ b/packages/components/containers/themes/properties.ts
@@ -1,6 +1,7 @@
 export const styles = {
     fontSize: '--setting-font-size',
     fontFamily: '--setting-font-family',
+    backgroundNorm: '--background-norm',
 } as const;
 
 export const classNames = {