Setup for PG dark mode.

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;

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) {

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');

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());

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

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>

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 $_