Add dark mode support.

htdocs/js/DragNDrop/dragndrop.js

@@ -410,6 +410,7 @@
 		htmlBucket(label, removable, indices = []) {
 			const bucketElement = document.createElement('div');
 			bucketElement.classList.add('dd-bucket');
+			bucketElement.dataset.bsTheme = 'light';
 
 			const bucketLabel = document.createElement('div');
 			bucketLabel.classList.add('dd-bucket-label');

htdocs/js/DropDown/dropdown.scss

@@ -16,6 +16,15 @@
 		--bs-btn-active-border-color: #ccc;
 		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 
+		[data-bs-theme='dark'] & {
+			--bs-btn-color: #bbb;
+			--bs-btn-bg: black;
+			--bs-btn-hover-color: #fff;
+			--bs-btn-hover-bg: #2c2b2a;
+			--bs-btn-active-color: #fff;
+			--bs-btn-active-bg: #2c2b2a;
+		}
+
 		&.show {
 			border-color: rgba(112, 154, 192, 0.8);
 			outline: 0;
@@ -37,5 +46,11 @@
 		--bs-dropdown-link-active-color: black;
 		--bs-dropdown-link-active-bg: lightgray;
 		--bs-dropdown-link-hover-bg: #d3d3d387;
+
+		[data-bs-theme='dark'] & {
+			--bs-dropdown-link-active-color: white;
+			--bs-dropdown-link-active-bg: #737373;
+			--bs-dropdown-link-hover-bg: #77777777;
+		}
 	}
 }

htdocs/js/GraphTool/graphtool.js

@@ -126,6 +126,7 @@ window.graphTool = (containerId, options) => {
 		descriptionSpan.textContent = options.ariaDescription ?? 'Interactively graph objects';
 		gt.board.containerObj.after(descriptionSpan);
 		gt.board.containerObj.setAttribute('aria-describedby', descriptionSpan.id);
+		gt.board.containerObj.dataset.bsTheme = 'light';
 
 		gt.board.suspendUpdate();
 

htdocs/js/GraphTool/graphtool.scss

@@ -6,6 +6,10 @@
 	border-radius: 10px;
 	box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.15);
 
+	[data-bs-theme='dark'] & {
+		box-shadow: inset 0 0 5px 5px rgba(255, 255, 255, 0.15);
+	}
+
 	@media only screen and (max-width: 600px) {
 		width: 342px;
 	}
@@ -276,6 +280,7 @@
 		flex-direction: column;
 		width: calc(100% - 40px);
 		background-color: #fff;
+		color: #000;
 		opacity: 0;
 		transition: all 0.2s ease-in-out;
 
@@ -339,11 +344,15 @@
 }
 
 .gt-fullscreenwrap:fullscreen {
-	background-color: #ccc;
+	background-color: #f5f5f5;
 	padding: 0;
 	width: 100%;
 	height: 100%;
 
+	[data-bs-theme='dark'] & {
+		background-color: #252525;
+	}
+
 	.graphtool-container {
 		margin: 0 auto;
 

htdocs/js/ImageView/imageview.js

@@ -31,12 +31,6 @@
 		modal.setAttribute('aria-label', 'image view dialog');
 		modal.tabIndex = -1;
 
-		// Force the dialog into light mode. This is needed for a webwork2 page in dark mode since the dialog is outside
-		// of the problem content.  At least until PG is updated to honor dark mode. Further discussion on this will
-		// also be needed at that time since many images have transparent backgrounds that will not work with a dark
-		// background.
-		modal.dataset.bsTheme = 'light';
-
 		const dialog = document.createElement('div');
 		dialog.classList.add('modal-dialog');
 
@@ -118,6 +112,7 @@
 
 		const body = document.createElement('div');
 		body.classList.add('modal-body');
+		body.dataset.bsTheme = 'light';
 
 		let graphDiv = null;
 		if (imgType == 'div') {
@@ -335,26 +330,44 @@
 		}
 	};
 
-	// Set up images that are already in the page.
-	document.querySelectorAll('.image-view-elt').forEach((elt) => {
-		elt.addEventListener('click', imageViewDialog);
-		elt.addEventListener('keydown', keyHandler);
-	});
+	const handleBrokenImage = (img) => {
+		img.classList.add('broken');
+		img.removeAttribute('role');
+	};
+
+	const attachListeners = (img) => {
+		img.removeEventListener('click', imageViewDialog);
+		img.removeEventListener('keydown', keyHandler);
+		img.addEventListener('click', imageViewDialog);
+		img.addEventListener('keydown', keyHandler);
+	};
 
-	const attachListeners = (node) => {
-		node.removeEventListener('click', imageViewDialog);
-		node.removeEventListener('keydown', keyHandler);
-		node.addEventListener('click', imageViewDialog);
-		node.addEventListener('keydown', keyHandler);
+	const initializeImgViewElt = (img) => {
+		if (img instanceof HTMLImageElement) {
+			if (img.complete) {
+				if (img.naturalWidth === 0) handleBrokenImage(img);
+				else attachListeners(img);
+			} else {
+				img.addEventListener('error', () => handleBrokenImage(img));
+				img.addEventListener('load', () => attachListeners(img));
+			}
+		} else {
+			attachListeners(img);
+		}
 	};
 
+	// Set up images that are already in the page.
+	for (const elt of document.querySelectorAll('.image-view-elt')) {
+		initializeImgViewElt(elt);
+	}
+
 	// Deal with images that are added to the page later.
 	const observer = new MutationObserver((mutationsList) => {
 		mutationsList.forEach((mutation) => {
 			mutation.addedNodes.forEach((node) => {
 				if (node instanceof Element) {
-					if (node.classList.contains('image-view-elt')) attachListeners(node);
-					else node.querySelectorAll('.image-view-elt').forEach(attachListeners);
+					if (node.classList.contains('image-view-elt')) initializeImgViewElt(node);
+					else node.querySelectorAll('.image-view-elt').forEach(initializeImgViewElt);
 				}
 			});
 		});

htdocs/js/ImageView/imageview.scss

@@ -1,8 +1,12 @@
 .image-view-elt {
 	max-width: 100%;
 
-	&:hover {
-		cursor: pointer;
+	&:not(.broken) {
+		background-color: #f5f5f5;
+
+		&:hover {
+			cursor: pointer;
+		}
 	}
 
 	&.top {
@@ -32,6 +36,7 @@
 		padding: 8px;
 		text-align: center;
 		box-sizing: content-box !important;
+		background-color: white;
 
 		img {
 			max-width: 100%;
@@ -54,6 +59,7 @@
 		}
 
 		.btn {
+			--bs-btn-box-shadow: none;
 			padding: 0 0.2rem;
 			margin: 0 0.25rem 0 0;
 			border: none;

htdocs/js/Knowls/knowl.js

@@ -24,8 +24,8 @@
 			knowl.knowlModal.setAttribute('aria-labelledby', `${knowl.knowlModal.id}-title`);
 			knowl.knowlModal.setAttribute('aria-hidden', 'true');
 
-			// Force the dialog into light mode. This is needed for a webwork2 page in dark mode since the dialog is
-			// outside of the problem content.  At least until PG and the help files are updated to honor dark mode.
+			// Force the dialog into light mode. This is needed at least until
+			// the knowl css and help files are updated to honor dark mode.
 			knowl.knowlModal.dataset.bsTheme = 'light';
 
 			const knowlDialog = document.createElement('div');

htdocs/js/MathQuill/mqeditor.js

@@ -170,18 +170,17 @@
 			title.textContent = 'Equation Editor';
 
 			const closeButton = document.createElement('button');
-			// When bootstrap is upgraded to version 5.3 this will need to be changed.
-			// btn-close-white will be deprecated and data-bs-theme="dark" is used instead.
-			closeButton.classList.add('btn-close', 'btn-close-white');
+			closeButton.classList.add('btn-close');
 			closeButton.type = 'button';
 			closeButton.setAttribute('aria-label', 'Close');
+			closeButton.dataset.bsTheme = 'dark';
 			closeButton.dataset.bsToggle = 'collapse';
 			closeButton.dataset.bsTarget = `#${answerLabel}-equation-editor`;
 
 			cardHeader.append(title, closeButton);
 
 			const cardBody = document.createElement('div');
-			cardBody.classList.add('card-body', 'p-2', 'd-flex', 'align-items-center');
+			cardBody.classList.add('card-body', 'p-2', 'd-flex', 'align-items-center', 'bg-light-subtle');
 			cardBody.append(answerQuill);
 
 			// Insert text at a the current cursor position in a text input replacing the current selection if any.
@@ -213,7 +212,7 @@
 				'pb-2',
 				'px-2',
 				'gap-2',
-				'bg-white',
+				'bg-light-subtle',
 				'border-top-0'
 			);
 

htdocs/js/MathQuill/mqeditor.scss

@@ -8,6 +8,10 @@ span[id^='mq-answer'] {
 	background-color: white;
 	margin-right: 0;
 	margin-left: 0;
+
+	[data-bs-theme='dark'] & {
+		background-color: black;
+	}
 }
 
 input[type='text'].codeshard.mq-edit {

htdocs/js/Problem/problem.scss

@@ -13,6 +13,11 @@
 	border-radius: 4px;
 	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 
+	[data-bs-theme='dark'] & {
+		background-color: #252525;
+		border-color: #e3e3e3;
+	}
+
 	p {
 		margin-top: 1rem;
 		margin-bottom: 1rem;
@@ -39,6 +44,11 @@
 		border: 1px solid #ccc;
 		border-radius: 4px;
 		background-color: white;
+
+		[data-bs-theme='dark'] & {
+			color: #bbb;
+			background-color: black;
+		}
 	}
 
 	textarea,
@@ -357,6 +367,9 @@
 		.popover-header {
 			--bs-popover-header-bg: #ffc107;
 			--bs-popover-header-color: black;
+			.btn-close {
+				--bs-btn-close-filter: invert(0) grayscale(100%) brightness(200%);
+			}
 		}
 	}
 
@@ -385,6 +398,10 @@
 		.card {
 			--bs-card-cap-bg: #ddd;
 
+			[data-bs-theme='dark'] & {
+				--bs-card-cap-bg: #333;
+			}
+
 			.card-header {
 				border-radius: 0;
 
@@ -400,6 +417,10 @@
 
 				.parsehilight {
 					background-color: yellow;
+
+					[data-bs-theme='dark'] & {
+						background-color: #550;
+					}
 				}
 
 				.ArrayLayout {
@@ -414,6 +435,7 @@
 				&.feedback-message {
 					direction: ltr;
 					background-color: #ede275;
+					color: #212529;
 					&:not(:last-child) {
 						border-bottom: 1px solid black;
 					}

htdocs/js/Scaffold/scaffold.scss

@@ -58,6 +58,10 @@
 	& > div.accordion-collapse {
 		background: #fafafa;
 		border-top: 1px solid rgba(0, 0, 0, 0.125);
+
+		[data-bs-theme='dark'] & {
+			background: #151515;
+		}
 	}
 }
 

lib/Plots/JSXGraph.pm

@@ -43,7 +43,7 @@ sub HTML {
 	my $divs =
 		qq!<div id="jsxgraph-plot-$self->{name}" !
 		. qq!class="jxgbox plots-jsxgraph$imageviewClass$roundedCornersClass"$tabindex !
-		. qq!style="width: ${width}px; height: ${height}px;"$aria_details></div>!;
+		. qq!style="width: ${width}px; height: ${height}px;" data-bs-theme="light"$aria_details></div>!;
 	$divs = qq!<div class="image-container">$divs$details</div>! if $details;
 
 	my $axes      = $plots->axes;

macros/core/PGbasicmacros.pl

@@ -955,7 +955,7 @@ sub SOLUTION {
 				class => 'accordion-item',
 				tag(
 					'summary',
-					class => 'accordion-button collapsed text-primary fw-bold py-2',
+					class => 'accordion-button collapsed text-primary-emphasis fw-bold py-2',
 					tag('span', class => 'accordion-header user-select-none', SOLUTION_HEADING())
 					)
 					. tag(
@@ -997,7 +997,7 @@ sub HINT {
 				class => 'accordion-item',
 				tag(
 					'summary',
-					class => 'accordion-button collapsed text-primary fw-bold py-2',
+					class => 'accordion-button collapsed text-primary-emphasis fw-bold py-2',
 					tag('span', class => 'accordion-header user-select-none', HINT_HEADING())
 					)
 					. tag(
@@ -2845,7 +2845,7 @@ sub image {
 					. tag(
 						'div',
 						id    => 'LONG-DESCRIPTION-ID',
-						class => 'image-details-content bg-white py-2 px-3 my-2 border',
+						class => 'image-details-content bg-light-subtle py-2 px-3 my-2 border',
 						$description_details
 						. tag(
 							'div',