Add dark mode support.

The color scheme (dark or light) that is used is automatically detected
from the browser's settings initially, but can be set via a color scheme
chooser in the page header.

PG problems are still rendered in light mode regardless of the color
mode for the rest of the page.  Converting PG to honor dark mode will
take some work. Note that there are some small changes needed for the
image view dialog and knowls of PG to make sure that those dialogs
render in light mode. There is also a minor change to make the scaffold
buttons stay in light mode as well.

Note that there were some issues with light mode (i.e., the existing
themes).  The contrast of the links in the site nav were not good when
they were focused or hovered over with the mouse. This was due to an
override of the link focus styles that made the colors lighter in those
cases. That was needed for links in the masthead (the page header), but
generally was bad elsewhere. So instead this uses the Bootstrap defaults
for the hover/active colors which darkens the colors instead of
lightening them.  So now there is just a special case for links in the
masthead, and the other links use bootstraps default colors which gives
higher contrast in the site nav.

One side advantage of the above approach since it darkens links on hover
and focus instead of lightening them is that I can finally switch to a
link color for the math4-yellow theme that is not off theme.  Previously
it was a reddish color that I never really like in the scope of the
theme, but was needed for contrast.  Now it uses a rather dark yellow
and gives a more consistent feel for the theme.

The MathJax `no-dark-mode` extension has been converted into a
`bs-color-scheme` extension which rewrites the MathJax styles to honor
the `data-bs-theme` value instead of using media queries for the browser
mode.  This means that MathJax will display in the correct mode wherever
the element is in the page.  For example, on a problem page the math in
the problem will always be in light mode.  On the problem grader page
the math in the problem there will also be in light mode, but the
formula student answers will be in dark mode if the page is set to that.
Note that the MathJax dialogs will always be in dark mode if the page is
set to that since those are injected outside of the problem content div.
The menu will also always be dark mode in a problem if the page is set
to that since there isn't an override for the menu in the
`data-bs-theme` extension.  Its styles work differently.

Note that there was a small change needed for the PG CodeMirror editor
to give its default light theme a white background.  This was done in
the `pg-codemirror-editor` repository, and the new npm package published
and included in this pull request.

I am sure that I missed some colors that need to be adjusted in dark
mode and perhaps issues with forcing PG into light mode, but I can't
find anything right now.  So please check this carefully.

The `README` files in the theme directories have been deleted, and
replaced with a single `README.md` file in the parent `htdocs/themes`
directory.  It has instructions on how to create a custom theme, and
documents the Sass and CSS variables that can be set. There is a small
change in `ConfigValues.pm` to only list directories when listing theme
directories, and to skip this `README.md` file.

Author: drgrice1

htdocs/js/GatewayQuiz/gateway.scss

@@ -1,13 +1,5 @@
 /* gateway styles */
 
-div.gwMessage {
-	background-color: #ffeeaa;
-	box-shadow: 3px 3px 3px darkgray;
-	margin: 0 0 1rem 0;
-	padding: 0.25rem;
-	border-radius: 3px;
-}
-
 #gwTimer {
 	position: sticky;
 	width: 15em;
@@ -60,6 +52,11 @@ table.attemptResults {
 	border: 1px solid #ddd;
 	border-radius: 3px;
 
+	[data-bs-theme='dark'] & {
+		border-color: #555;
+		background-color: var(--bs-primary-bg-subtle, 'black');
+	}
+
 	h2.gw-problem-number {
 		display: inline-block;
 		font-size: 16px;
@@ -85,21 +82,27 @@ table.attemptResults {
 	}
 
 	colgroup.page {
-		border-left: solid 1pt black;
-		border-right: solid 1pt black;
+		border-left: solid 1pt var(--bs-emphasis-color, black);
+		border-right: solid 1pt var(--bs-emphasis-color, black);
 	}
 
 	.page.active {
 		background-color: #ffeeaa;
+
+		[data-bs-theme='dark'] & {
+			color: white;
+			background-color: #80690a;
+		}
 	}
 }
 
 div.gwDivider {
 	margin: 0px 0px 10px 0px;
 }
 
-/* Override the pg style so that the problem-content is not offset in gateway quizzes. */
+/* Override the pg style so that the problem-content is not offset in gateway quizzes and force a light color scheme. */
 .problem-content {
+	color-scheme: light;
 	padding: unset;
 	background-color: unset;
 	border: unset;

htdocs/js/MathJaxConfig/bs-color-scheme.js

@@ -0,0 +1,96 @@
+if (MathJax.loader) MathJax.loader.checkVersion('[bs-color-scheme]', '4.1.0', 'extension');
+
+const switchToBSStyle = (obj, key = '@media (prefers-color-scheme: dark)') => {
+	obj["[data-bs-theme='dark']"] = obj[key];
+	delete obj[key];
+	obj["[data-bs-theme='light']"] = structuredClone(obj);
+};
+
+for (const [immediate, extension, ready] of [
+	[
+		MathJax._.ui?.dialog,
+		'core',
+		() => {
+			const { DraggableDialog } = MathJax._.ui.dialog.DraggableDialog;
+			switchToBSStyle(DraggableDialog.styles);
+
+			// This is a workaround for a bug in MathJax 4.1.0.  Delete this for the next version of MathJax.
+			// See https://github.com/mathjax/MathJax-src/pull/1414.
+			DraggableDialog.styles["[data-bs-theme='dark']"]['.mjx-dialog a[href]'] =
+				DraggableDialog.styles["[data-bs-theme='dark']"]['a[href]'];
+			delete DraggableDialog.styles["[data-bs-theme='dark']"]['a[href]'];
+			DraggableDialog.styles["[data-bs-theme='dark']"]['.mjx-dialog a[href]:visited'] =
+				DraggableDialog.styles["[data-bs-theme='dark']"]['a[href]:visited'];
+			delete DraggableDialog.styles["[data-bs-theme='dark']"]['a[href]:visited'];
+		}
+	],
+	[
+		MathJax._.a11y?.explorer,
+		'a11y/explorer',
+		() => {
+			const Region = MathJax._.a11y.explorer.Region;
+			for (const region of ['LiveRegion', 'HoverRegion', 'ToolTip']) {
+				if (':root' in Region[region].style.styles) {
+					Region[region].style.styles["[data-bs-theme='light']"] = Region[region].style.styles[':root'];
+
+					// The variable --mjx-bg1-color is defined to be 'rgba(var(--mjx-bg-blue), var(--mjx-bg-alpha))'.
+					// I suspect this is a typo as the variable -mjx-bg-alpha is not defined anywhere. In any case this
+					// change is needed to get the correct background color on the focused element in the explorer.
+					Region[region].style.styles["[data-bs-theme='light']"]['--mjx-bg1-color'] =
+						'rgba(var(--mjx-bg-blue), var(--mjx-bg1-alpha))';
+				}
+				Region[region].style.styles["[data-bs-theme='dark']"] =
+					Region[region].style.styles['@media (prefers-color-scheme: dark)'];
+				if (':root' in Region[region].style.styles["[data-bs-theme='dark']"]) {
+					Object.assign(
+						Region[region].style.styles["[data-bs-theme='dark']"],
+						Region[region].style.styles["[data-bs-theme='dark']"][':root']
+					);
+					delete Region[region].style.styles["[data-bs-theme='dark']"][':root'];
+				}
+				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) => {
+				switchToBSStyle(
+					handler.documentClass.speechStyles,
+					'@media (prefers-color-scheme: dark) /* explorer */'
+				);
+				return handler;
+			});
+		}
+	],
+	[
+		MathJax._.output?.chtml,
+		'output/chtml',
+		() => {
+			const { CHTML } = MathJax._.output.chtml_ts;
+			switchToBSStyle(CHTML);
+			const { ChtmlMaction } = MathJax._.output.chtml.Wrappers.maction;
+			switchToBSStyle(ChtmlMaction.styles, '@media (prefers-color-scheme: dark) /* chtml maction */');
+		}
+	],
+	[
+		MathJax._.output?.svg,
+		'output/svg',
+		() => {
+			const { SVG } = MathJax._.output.svg_ts;
+			switchToBSStyle(SVG.commonStyles);
+			const { SvgMaction } = MathJax._.output.svg.Wrappers.maction;
+			switchToBSStyle(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();
+		};
+	}
+}

htdocs/js/MathJaxConfig/mathjax-config.js

@@ -2,8 +2,8 @@ if (!window.MathJax) {
 	window.MathJax = {
 		tex: { packages: { '[+]': webworkConfig?.showMathJaxErrors ? [] : ['noerrors'] } },
 		loader: {
-			load: ['input/asciimath', '[tex]/noerrors', '[no-dark-mode]'],
-			paths: { 'no-dark-mode': webworkConfig?.mathJaxDarkModeUrl ?? './no-dark-mode.js' }
+			load: ['input/asciimath', '[tex]/noerrors', '[bs-color-scheme]'],
+			paths: { 'bs-color-scheme': webworkConfig?.mathJaxBSColorSchemeUrl ?? './bs-color-scheme.js' }
 		},
 		startup: {
 			ready() {

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

@@ -1,5 +1,5 @@
 .code-mirror-editor {
-	border: 1px solid #ddd;
+	border: 1px solid var(--ww-layout-border-color, #ddd);
 	min-height: 400px;
 	overflow: auto;
 	resize: vertical;
@@ -25,7 +25,7 @@
 
 // This style is used if the CodeMirror editor is disabled in localOverrides.conf.
 .text-area-editor {
-	border: 1px solid #ddd;
+	border: 1px solid var(--ww-layout-border-color, #ddd);
 	padding: 2px;
 	height: 550px;
 	min-height: 400px;

htdocs/js/PGCodeMirror/pgeditor.scss

@@ -423,6 +423,7 @@
 	const iframe = document.createElement('iframe');
 	iframe.title = 'Rendered content';
 	iframe.id = 'pgedit-render-iframe';
+	iframe.style.colorScheme = 'light';
 
 	// Adjust the height of the iframe when the window is resized and when the iframe loads.
 	const adjustIFrameHeight = () => {

htdocs/js/PGProblemEditor/pgproblemeditor.js

@@ -69,6 +69,7 @@
 						iframe = document.createElement('iframe');
 						iframe.id = `${renderArea.id}_iframe`;
 						iframe.style.border = 'none';
+						iframe.style.colorScheme = 'light';
 						while (renderArea.firstChild) renderArea.firstChild.remove();
 						renderArea.append(iframe);
 

htdocs/js/RenderProblem/renderproblem.js

@@ -0,0 +1,75 @@
+'use strict';
+
+(() => {
+	const getPreferredTheme = () => {
+		const storedTheme = localStorage.getItem('WW.color-scheme');
+		if (storedTheme) return storedTheme;
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	};
+
+	let flatpickrDarkTheme;
+
+	const setTheme = (theme) => {
+		const themeValue =
+			theme === 'auto' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme;
+		document.documentElement.setAttribute('data-bs-theme', themeValue);
+
+		if (!flatpickrDarkTheme) flatpickrDarkTheme = document.getElementById('flatpickr-dark-theme');
+		if (flatpickrDarkTheme) {
+			if (themeValue === 'dark') document.head.append(flatpickrDarkTheme);
+			else flatpickrDarkTheme.remove();
+		}
+	};
+
+	setTheme(getPreferredTheme());
+
+	const showActiveTheme = (theme, focus = false) => {
+		const themeSwitcher = document.getElementById('color-scheme-chooser');
+		if (!themeSwitcher) return;
+
+		const activeThemeIcon = themeSwitcher.querySelector('.theme-icon-active');
+		const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+
+		for (const element of document.querySelectorAll('[data-bs-theme-value]')) {
+			element.classList.remove('active');
+			element.setAttribute('aria-pressed', 'false');
+		}
+
+		btnToActive.classList.add('active');
+		btnToActive.setAttribute('aria-pressed', 'true');
+		activeThemeIcon.classList.remove('fa-sun', 'fa-moon', 'fa-circle-half-stroke');
+		activeThemeIcon.classList.add(
+			theme === 'light' ? 'fa-sun' : theme === 'dark' ? 'fa-moon' : 'fa-circle-half-stroke'
+		);
+		themeSwitcher.setAttribute(
+			'aria-label',
+			`${themeSwitcher.title} (${
+				themeSwitcher.dataset[`${btnToActive.dataset.bsThemeValue}Text`] ?? btnToActive.dataset.bsThemeValue
+			})`
+		);
+
+		if (focus) themeSwitcher.focus();
+	};
+
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+		const storedTheme = localStorage.getItem('WW.color-scheme');
+		if (storedTheme !== 'light' && storedTheme !== 'dark') {
+			const preferredTheme = getPreferredTheme();
+			setTheme(preferredTheme);
+			showActiveTheme(preferredTheme);
+		}
+	});
+
+	window.addEventListener('DOMContentLoaded', () => {
+		showActiveTheme(getPreferredTheme());
+
+		for (const toggle of document.querySelectorAll('[data-bs-theme-value]')) {
+			toggle.addEventListener('click', () => {
+				const theme = toggle.getAttribute('data-bs-theme-value');
+				localStorage.setItem('WW.color-scheme', theme);
+				setTheme(theme);
+				showActiveTheme(theme, true);
+			});
+		}
+	});
+})();