diff --git a/htdocs/js/GatewayQuiz/gateway.scss b/htdocs/js/GatewayQuiz/gateway.scss
index bb0e3fc40f..28ceea7f2c 100644
--- a/htdocs/js/GatewayQuiz/gateway.scss
+++ b/htdocs/js/GatewayQuiz/gateway.scss
@@ -108,9 +108,8 @@ div.gwDivider {
 	margin: 0px 0px 10px 0px;
 }
 
-/* Override the pg style so that the problem-content is not offset in gateway quizzes and force a light color scheme. */
+/* Override the pg style so that the problem-content is not offset in gateway quizzes. */
 .problem-content {
-	color-scheme: light;
 	padding: unset;
 	background-color: unset;
 	border: unset;
diff --git a/htdocs/js/PGProblemEditor/pgproblemeditor.js b/htdocs/js/PGProblemEditor/pgproblemeditor.js
index 4318e11f1f..719da4e774 100644
--- a/htdocs/js/PGProblemEditor/pgproblemeditor.js
+++ b/htdocs/js/PGProblemEditor/pgproblemeditor.js
@@ -586,6 +586,15 @@
 	iframe.title = 'Rendered content';
 	iframe.id = 'pgedit-render-iframe';
 
+	window.addEventListener('message', (event) => {
+		if (event.data !== 'render-iframe-ready' || iframe.contentWindow !== event.source) return;
+		iframe.contentWindow.postMessage({
+			theme:
+				localStorage.getItem('WW.color-scheme') ??
+				(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+		});
+	});
+
 	// Adjust editor dimensions when the window is resized and when the iframe loads.
 	const adjustIFrameHeight = () => {
 		if (document.body.clientWidth < 992) {
diff --git a/htdocs/js/RenderProblem/renderproblem.js b/htdocs/js/RenderProblem/renderproblem.js
index 5b7345c79c..8a90cb48a7 100644
--- a/htdocs/js/RenderProblem/renderproblem.js
+++ b/htdocs/js/RenderProblem/renderproblem.js
@@ -1,4 +1,17 @@
 (() => {
+	const renderedIframes = [];
+
+	window.addEventListener('message', (event) => {
+		if (event.data !== 'render-iframe-ready') return;
+		renderedIframes
+			.find((i) => i.contentWindow === event.source)
+			?.contentWindow.postMessage({
+				theme:
+					localStorage.getItem('WW.color-scheme') ??
+					(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+			});
+	});
+
 	// renderElement may either be the id of an html element, or directly an html element.
 	// If it is an html element, then that element must have an id.
 	webworkConfig.renderProblem = (renderElement, renderOptions) =>
@@ -28,7 +41,10 @@
 				send_pg_flags: 1,
 				extra_header_text:
 					'<style>' +
-					'html{overflow-y:hidden;}body{padding:1px;background:#f5f5f5;}.container-fluid{padding:0px;}' +
+					'html{overflow-y:hidden;}' +
+					'body{padding:1px;background:#f5f5f5;}' +
+					'[data-bs-theme="dark"] body{background:var(--bs-primary-bg-subtle);}' +
+					'.container-fluid{padding:0px;}' +
 					'</style>',
 				...renderOptions
 			};
@@ -70,6 +86,7 @@
 						iframe.style.border = 'none';
 						while (renderArea.firstChild) renderArea.firstChild.remove();
 						renderArea.append(iframe);
+						renderedIframes.push(iframe);
 
 						if (data.pg_flags && data.pg_flags.comment) {
 							const container = document.createElement('div');
diff --git a/htdocs/js/System/color-scheme.js b/htdocs/js/System/color-scheme.js
index f2a325b667..9cd8946f76 100644
--- a/htdocs/js/System/color-scheme.js
+++ b/htdocs/js/System/color-scheme.js
@@ -19,6 +19,12 @@
 			if (themeValue === 'dark') document.head.append(flatpickrDarkTheme);
 			else flatpickrDarkTheme.remove();
 		}
+
+		for (const renderArea of document.querySelectorAll('.rpc_render_area')) {
+			for (const iframe of renderArea.getElementsByTagName('iframe')) {
+				iframe.contentDocument.documentElement.dataset.bsTheme = themeValue;
+			}
+		}
 	};
 
 	setTheme(getPreferredTheme());
diff --git a/lib/WeBWorK/ContentGenerator/Problem.pm b/lib/WeBWorK/ContentGenerator/Problem.pm
index fc4d3d2954..69ea93ba07 100644
--- a/lib/WeBWorK/ContentGenerator/Problem.pm
+++ b/lib/WeBWorK/ContentGenerator/Problem.pm
@@ -977,14 +977,7 @@ sub output_problem_body ($c) {
 		}
 	}
 
-	return $c->tag(
-		'div',
-		id    => 'output_problem_body',
-		class => 'text-dark',
-		style => 'color-scheme: light',
-		data  => { bs_theme => 'light' },
-		$c->b($c->{pg}{body_text})
-	);
+	return $c->tag('div', id => 'output_problem_body', $c->b($c->{pg}{body_text}));
 }
 
 # Output messages about the problem
diff --git a/templates/ContentGenerator/GatewayQuiz.html.ep b/templates/ContentGenerator/GatewayQuiz.html.ep
index 2d87362580..0feb701f74 100644
--- a/templates/ContentGenerator/GatewayQuiz.html.ep
+++ b/templates/ContentGenerator/GatewayQuiz.html.ep
@@ -638,10 +638,9 @@
 						% delete stash->{briefErrorOutput};
 					% } else {
 						<div
-							class="problem-content text-dark col-lg-10"
+							class="problem-content col-lg-10"
 							<%== get_problem_lang_and_dir($pg->{flags}, $ce->{perProblemLangAndDirSettingMode},
 								$ce->{language}) %>
-							data-bs-theme="light"
 						>
 							<%== $pg->{body_text} =%>
 						</div>
diff --git a/templates/RPCRenderFormats/default.html.ep b/templates/RPCRenderFormats/default.html.ep
index 245c24b30a..ec762d307a 100644
--- a/templates/RPCRenderFormats/default.html.ep
+++ b/templates/RPCRenderFormats/default.html.ep
@@ -13,6 +13,13 @@
 			course: <%= $courseID %>
 		</title>
 		<link href="<%= "$ce->{webworkURLs}{htdocs}/images/favicon.ico" %>" rel="shortcut icon">
+		<script>
+			window.parent.postMessage('render-iframe-ready');
+			window.addEventListener('message', (event) => {
+				if (!event.data || !event.data.theme) return;
+				document.documentElement.dataset.bsTheme = event.data.theme;
+			});
+		</script>
 		% # Add third party css and javascript as well as css and javascript requested by the problem.
 		% for (@$third_party_css) {
 			%= stylesheet $_