Add dark mode compatibility to Twinkle (#2023)

modules/twinkleblock.js

@@ -649,6 +649,7 @@ Twinkle.block.callback.change_action = function twinkleblockCallbackChangeAction
 
 
 		$form.find('[name=pagerestrictions]').select2({
+			theme: 'default select2-morebits',
 			width: '100%',
 			placeholder: 'Select pages to block user from',
 			language: {
@@ -697,6 +698,7 @@ Twinkle.block.callback.change_action = function twinkleblockCallbackChangeAction
 		});
 
 		$form.find('[name=namespacerestrictions]').select2({
+			theme: 'default select2-morebits',
 			width: '100%',
 			matcher: Morebits.select2.matchers.wordBeginning,
 			language: {

modules/twinkleconfig.js

@@ -981,7 +981,6 @@ Twinkle.config.sections = [
 
 ]; // end of Twinkle.config.sections
 
-
 Twinkle.config.init = function twinkleconfigInit() {
 
 	// create the config page at Wikipedia:Twinkle/Preferences
@@ -992,8 +991,9 @@ Twinkle.config.init = function twinkleconfigInit() {
 			return;  // maybe the page is misconfigured, or something - but any attempt to modify it will be pointless
 		}
 
-		// set style (the url() CSS function doesn't seem to work from wikicode - ?!)
-		document.getElementById('twinkle-config-titlebar').style.backgroundImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB%2FqqA%2BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEhQTFRFr73ZobTPusjdsMHZp7nVwtDhzNbnwM3fu8jdq7vUt8nbxtDkw9DhpbfSvMrfssPZqLvVztbno7bRrr7W1d%2Fs1N7qydXk0NjpkW7Q%2BgAAADVJREFUeNoMwgESQCAAAMGLkEIi%2FP%2BnbnbpdB59app5Vdg0sXAoMZCpGoFbK6ciuy6FX4ABAEyoAef0BXOXAAAAAElFTkSuQmCC)';
+		// set style to nothing to prevent conflict with external css
+		document.getElementById('twinkle-config').removeAttribute('style');
+		document.getElementById('twinkle-config-titlebar').removeAttribute('style');
 
 		var contentdiv = document.getElementById('twinkle-config-content');
 		contentdiv.textContent = '';  // clear children
@@ -1258,9 +1258,8 @@ Twinkle.config.init = function twinkleconfigInit() {
 
 				// add help tip
 				cell = document.createElement('td');
-				cell.style.fontSize = '90%';
+				cell.className = 'twinkle-config-helptip';
 
-				cell.style.color = 'gray';
 				if (pref.helptip) {
 					// convert mentions of templates in the helptip to clickable links
 					cell.innerHTML = pref.helptip.replace(/{{(.+?)}}/g,
@@ -1287,8 +1286,6 @@ Twinkle.config.init = function twinkleconfigInit() {
 
 		var footerbox = document.createElement('div');
 		footerbox.setAttribute('id', 'twinkle-config-buttonpane');
-		footerbox.style.backgroundColor = '#BCCADF';
-		footerbox.style.padding = '0.5em';
 		var button = document.createElement('button');
 		button.setAttribute('id', 'twinkle-config-submit');
 		button.setAttribute('type', 'submit');

modules/twinklewarn.js

@@ -1478,6 +1478,7 @@ Twinkle.warn.callback.postCategoryCleanup = function twinklewarnCallbackPostCate
 	if (!Twinkle.getPref('oldSelect')) {
 		$('select[name=sub_group]')
 			.select2({
+				theme: 'default select2-morebits',
 				width: '100%',
 				matcher: Morebits.select2.matchers.optgroupFull,
 				templateResult: Morebits.select2.highlightSearchMatches,
@@ -1487,14 +1488,7 @@ Twinkle.warn.callback.postCategoryCleanup = function twinklewarnCallbackPostCate
 			})
 			.change(Twinkle.warn.callback.change_subcategory);
 
-		$('.select2-selection')
-			.keydown(Morebits.select2.autoStart)
-			.focus()
-			.on('click', function () {
-				// This container doesn't exist until .select2-selection is clicked by the user.
-				// Opt out of dark mode for now.
-				$('.select2-container').addClass('notheme');
-			});
+		$('.select2-selection').keydown(Morebits.select2.autoStart).focus();
 
 		mw.util.addCSS(
 			// Increase height

modules/twinklexfd.js

@@ -378,6 +378,7 @@ Twinkle.xfd.callback.change_category = function twinklexfdCallbackChangeCategory
 			$(work_area).find('[name=delsortCats]')
 				.attr('data-placeholder', 'Select delsort pages')
 				.select2({
+					theme: 'default select2-morebits',
 					width: '100%',
 					matcher: Morebits.select2.matcher,
 					templateResult: Morebits.select2.highlightSearchMatches,

morebits.css

@@ -8,22 +8,60 @@
  * The latest development source is available at [https://github.com/wikimedia-gadgets/twinkle/blob/master/morebits.css].
  */
 
+/* Define CSS variables */
+html {
+	--morebits-color-status-status: #4682B4;
+	--morebits-color-legend: #31628F;
+	--morebits-color-tooltip: #0000cd;
+	--morebits-color-info: #228B22;
+	--morebits-color-warning: #FF4500;
+	--morebits-color-titlebar-links: #3062AD;
+	--morebits-bgcolor-dialog: #F0F8FF;
+	--morebits-bgcolor-titlebar: #BCCADF;
+}
+
+@media screen {
+	html.skin-theme-clientpref-night {
+		--morebits-color-status-status: #A6C4DE;
+		--morebits-color-legend: #6B9DCC;
+		--morebits-color-tooltip: #7A7AFF;
+		--morebits-color-info: #6BDB6B;
+		--morebits-color-warning: #FF6D38;
+		--morebits-color-titlebar-links: #8BADDF;
+		--morebits-bgcolor-dialog: #141c26;
+		--morebits-bgcolor-titlebar: #1c2a52;
+	}
+}
+
+@media screen and (prefers-color-scheme: dark) {
+	html.skin-theme-clientpref-os {
+		--morebits-color-status-status: #A6C4DE;
+		--morebits-color-legend: #6B9DCC;
+		--morebits-color-tooltip: #7A7AFF;
+		--morebits-color-info: #6BDB6B;
+		--morebits-color-warning: #FF6D38;
+		--morebits-color-titlebar-links: #8BADDF;
+		--morebits-bgcolor-dialog: #141c26;
+		--morebits-bgcolor-titlebar: #1c2a52;
+	}
+}
+
 /* Morebits.status */
 
 .morebits_status_status {
-	color: #4682B4;
+	color: var(--morebits-color-status-status, #4682B4);
 }
 
 .morebits_status_info {
-	color: #228B22;
+	color: var(--morebits-color-info, #228B22);
 }
 
 .morebits_status_warn {
-	color: #FF4500;
+	color: var(--morebits-color-warning, #FF4500);
 }
 
 .morebits_status_error {
-	color: #FF4500;
+	color: var(--morebits-color-warning, #FF4500);
 	font-weight: bold;
 }
 
@@ -35,6 +73,7 @@ form.quickform
 	vertical-align: middle;
 	margin: auto;
 	padding: .5em;
+	color: var(--color-base, #202122);
 }
 
 form.quickform *
@@ -49,7 +88,7 @@ form.quickform fieldset
 
 form.quickform legend
 {
-	color: #31628F;
+	color: var(--morebits-color-legend, #31628F);
 	font-weight: bold;
 }
 
@@ -102,7 +141,7 @@ form.quickform textarea
 
 form.quickform input:disabled + label
 {
-	color: gray;
+	color: var(--color-disabled, #72777d);
 }
 
 form.quickform span.quickformDescription
@@ -125,7 +164,7 @@ form.quickform .quickformSubgroup
 /* The tooltip button and the content itself */
 form.quickform .morebits-tooltipButton
 {
-	color: mediumblue;
+	color: var(--morebits-color-tooltip, mediumblue);
 	font-weight: bold;
 	cursor: help;
 	padding: .3em;
@@ -141,7 +180,8 @@ form.quickform .morebits-tooltipButton
 
 div.morebits-scrollbox
 {
-	background: white;
+	background: var(--background-color-base, #fff);
+	color: inherit;
 	border: 1px solid gray;
 	margin-bottom: .6em;
 	margin-top: .6em;
@@ -167,8 +207,8 @@ div.morebits-scrollbox > :last-child
 
 div.morebits-previewbox
 {
-	background: white;
-	color: black;
+	background: inherit;
+	color: inherit;
 	border: 2px inset;
 	margin: .4em auto .2em;
 	padding: .2em .4em;
@@ -186,7 +226,8 @@ div.morebits-previewbox .mw-editsection
 
 div.morebits-usertext {
 	border: 1px solid #a2a9b1;
-	background-color: #f8f9fa;
+	background-color: var(--background-color-neutral-subtle, #f8f9fa);
+	color: inherit;
 	padding: 5px;
 	font-size: 95%;
 }
@@ -197,7 +238,8 @@ div.morebits-usertext {
 .morebits-dialog {
 	border: 1px #666 solid;
 	font-family: sans-serif;
-	background-color: #F0F8FF;
+	background-color: var(--morebits-bgcolor-dialog, #F0F8FF);
+	color: inherit;
 	background-image: none;
 }
 
@@ -216,7 +258,8 @@ div.morebits-usertext {
 
 body .ui-dialog.morebits-dialog .ui-dialog-titlebar {
 	height: 1em;
-	background-color: #BCCADF !important;
+	background-color: var(--morebits-bgcolor-titlebar, #BCCADF) !important;
+	color: inherit;
 	background-image: none !important;
 	font: bold 108% sans-serif; /* 100% is 12px (from above) => 108% is 12.96px */
 	overflow: hidden;
@@ -245,7 +288,8 @@ body .ui-dialog.morebits-dialog .ui-dialog-titlebar {
 }
 
 body .ui-dialog.morebits-dialog .ui-dialog-buttonpane {
-	background-color: #BCCADF;
+	background-color: var(--morebits-bgcolor-titlebar, #BCCADF);
+	color: inherit;
 	margin: 0;
 	min-height: .5em;
 	padding-left: 1.2em !important;
@@ -268,7 +312,7 @@ body .ui-dialog.morebits-dialog .ui-dialog-buttonpane button {
 }
 
 body .ui-dialog.morebits-dialog .morebits-dialog-footerlinks a {
-	color: #3062AD;
+	color: var(--morebits-color-titlebar-links, #3062AD);
 }
 
 .morebits-dialog-buttons[data-empty] + .morebits-dialog-footerlinks {
@@ -283,12 +327,20 @@ body .ui-dialog.morebits-dialog .morebits-dialog-footerlinks a {
 	display: inline-block;
 }
 
+.morebits-ui-tooltip {
+	background: var(--background-color-neutral-subtle, #f8f9fa);
+	color: inherit;
+	border-color: var(--border-color-base, #a2ab91);
+	box-shadow: 0 0 5px #a2ab91;
+}
+
 /* For styling message/warning boxes. Cannot use MediaWiki ombox class because it will be deprecated soon. */
 table.morebits-ombox {
     margin: 4px 10%;
     border-collapse: collapse;
     border: 1px solid #a2a9b1;
-    background: #f8f9fa;
+    background: var(--background-color-neutral-subtle, #f8f9fa);
+    color: inherit;
     box-sizing: border-box;
 }
 table.morebits-ombox-content {
@@ -304,3 +356,14 @@ th.morebits-mbox-text, td.morebits-mbox-text {
     padding: 0.25em 0.9em;
     width: 100%;
 }
+
+/* Override select2 silliness */
+.select2-morebits,
+.select2-morebits .select2-results,
+.select2-morebits .select2-results__option[aria-selected=true],
+.select2-morebits .select2-selection__rendered,
+.select2-morebits .select2-selection--multiple,
+.select2-morebits .select2-selection__choice {
+    background: var(--background-color-base, #fff) !important;
+    color: inherit !important;
+}

morebits.js

@@ -471,8 +471,6 @@ Morebits.quickForm.element.prototype.compute = function QuickFormElementCompute(
 				label.style.marginRight = '3px';
 			}
 			var select = node.appendChild(document.createElement('select'));
-			// opt out of dark mode for now
-			select.classList.add('notheme');
 			if (data.event) {
 				select.addEventListener('change', data.event, false);
 			}
@@ -675,9 +673,6 @@ Morebits.quickForm.element.prototype.compute = function QuickFormElementCompute(
 			}
 
 			subnode = node.appendChild(document.createElement('input'));
-			// opt out of dark mode for now
-			subnode.classList.add('notheme');
-
 			subnode.setAttribute('name', data.name);
 
 			if (data.type === 'input') {
@@ -867,8 +862,6 @@ Morebits.quickForm.element.prototype.compute = function QuickFormElementCompute(
 				label.appendChild(labelElement);
 			}
 			subnode = node.appendChild(document.createElement('textarea'));
-			// opt out of dark mode for now
-			subnode.classList.add('notheme');
 			subnode.setAttribute('name', data.name);
 			if (data.cols) {
 				subnode.setAttribute('cols', data.cols);
@@ -5868,6 +5861,9 @@ Morebits.simpleWindow = function SimpleWindow(width, height) {
 
 	// resize the scrollbox with the dialog, if one is present
 	$widget.resizable('option', 'alsoResize', '#' + this.content.id + ' .morebits-scrollbox, #' + this.content.id);
+
+	// add skin-invert to "close" button
+	$('.morebits-dialog .ui-dialog-titlebar-close').addClass('skin-invert');
 };
 
 Morebits.simpleWindow.prototype = {

tests/__snapshots__/morebits.quickForm.js.snap

@@ -112,7 +112,6 @@ exports[`quickform input element 1`] = `
     Label
   </label>
   <input
-    class="notheme"
     id="node_0"
     name="inputname"
     type="text"
@@ -168,7 +167,6 @@ exports[`quickform select element 1`] = `
     Select label
   </label>
   <select
-    class="notheme"
     id="node_1"
     name="selectname"
   >
@@ -205,7 +203,6 @@ exports[`quickform textarea element 1`] = `
   id="div_node_7"
 >
   <textarea
-    class="notheme"
     cols="4"
     id="node_7"
     name="textareaname1"