Merge pull request #14 from drgrice1/mathjax-4.1.0-no-dark-mode

Add a no-dark-mode extension for MathJax.

Author: somiaj

htdocs/js/MathJaxConfig/mathjax-config.js

@@ -1,7 +1,10 @@
 if (!window.MathJax) {
 	window.MathJax = {
 		tex: { packages: { '[+]': webworkConfig?.showMathJaxErrors ? [] : ['noerrors'] } },
-		loader: { load: ['input/asciimath', '[tex]/noerrors'] },
+		loader: {
+			load: ['input/asciimath', '[tex]/noerrors', '[no-dark-mode]'],
+			paths: { 'no-dark-mode': webworkConfig?.mathJaxDarkModeUrl ?? './no-dark-mode.js' }
+		},
 		startup: {
 			ready() {
 				const AM = MathJax.InputJax.AsciiMath.AM;

htdocs/js/MathJaxConfig/no-dark-mode.js

@@ -0,0 +1,63 @@
+if (MathJax.loader) MathJax.loader.checkVersion('[no-dark-mode]', '4.1.0', 'extension');
+
+for (const [immediate, extension, ready] of [
+	[
+		MathJax._.ui?.dialog,
+		'core',
+		() => {
+			const { DraggableDialog } = MathJax._.ui.dialog.DraggableDialog;
+			delete DraggableDialog.styles['@media (prefers-color-scheme: dark)'];
+		}
+	],
+
+	[
+		MathJax._.a11y?.explorer,
+		'a11y/explorer',
+		() => {
+			const Region = MathJax._.a11y.explorer.Region;
+			for (const region of ['LiveRegion', 'HoverRegion', 'ToolTip']) {
+				Region[region].style.styles['@media (prefers-color-scheme: dark)'] = {};
+			}
+			Region.LiveRegion.style.styles['@media (prefers-color-scheme: dark)']['mjx-ignore'] = { ignore: 1 };
+			MathJax.startup.extendHandler((handler) => {
+				delete handler.documentClass.speechStyles['@media (prefers-color-scheme: dark) /* explorer */'];
+				return handler;
+			});
+		}
+	],
+
+	[
+		MathJax._.output?.chtml,
+		'output/chtml',
+		() => {
+			const { CHTML } = MathJax._.output.chtml_ts;
+			delete CHTML.commonStyles['@media (prefers-color-scheme: dark)'];
+			const { ChtmlMaction } = MathJax._.output.chtml.Wrappers.maction;
+			delete ChtmlMaction.styles['@media (prefers-color-scheme: dark) /* chtml maction */'];
+		}
+	],
+
+	[
+		MathJax._.output?.svg,
+		'output/svg',
+		() => {
+			const { SVG } = MathJax._.output.svg_ts;
+			delete SVG.commonStyles['@media (prefers-color-scheme: dark)'];
+			const { SvgMaction } = MathJax._.output.svg.Wrappers.maction;
+			delete SvgMaction.styles['@media (prefers-color-scheme: dark) /* svg maction */'];
+		}
+	]
+]) {
+	if (immediate) {
+		ready();
+	} else {
+		const config = MathJax.config.loader;
+		config[extension] ??= {};
+		config[extension].extraLoads ??= [];
+		const check = config[extension].checkReady;
+		config[extension].checkReady = async () => {
+			if (check) await check();
+			return ready();
+		};
+	}
+}

lib/WeBWorK/ContentGenerator.pm

@@ -32,7 +32,7 @@ use MIME::Base64;
 use Scalar::Util qw(weaken);
 use HTML::Entities;
 use Encode;
-use Mojo::JSON qw(encode_json);
+use Mojo::JSON qw(encode_json true);
 
 use WeBWorK::File::Scoring qw(parse_scoring_file);
 use WeBWorK::Localize;
@@ -690,8 +690,12 @@ accessed by JavaScript files to obtain various webwork2 settings.
 
 =cut
 
-sub webwork_js_config ($c) {
-	return encode_json({ webwork_url => $c->location });
+sub webwork_js_config ($c, $showMathJaxErrors = 0) {
+	return encode_json({
+		webwork_url        => $c->location,
+		mathJaxDarkModeUrl => getAssetURL($c->ce, 'js/MathJaxConfig/no-dark-mode.js'),
+		$showMathJaxErrors ? (showMathJaxErrors => true) : ()
+	});
 }
 
 =item warnings()

templates/RPCRenderFormats/default.html.ep

@@ -19,7 +19,7 @@
 	% for (@$extra_css_files) {
 		%= stylesheet $_->{file}
 	% }
-	<script>const webworkConfig = <%= $showMathJaxErrors ? '{ showMathJaxErrors: true }' : 'null' %>;</script>
+	<script>const webworkConfig = <%== $c->webwork_js_config($showMathJaxErrors) %>;</script>
 	% for (@$third_party_js) {
 		%= javascript $_->[0], %{ $_->[1] // {} }
 	% }