Dark mode via mediawiki Custom CSS and Custom JS

a_darkmode.md

RJ doesn't want to run some random internet bloke's "experimental" extension on our very important wiki, because he's a grumpy old man

The custom css below is taken from wikimedia/mediawiki-extensions-DarkMode/resources/ext.DarkMode.less, and has been converted to regular CSS via https://jsonformatter.org/less-to-css

The Javascript is from wikimedia/mediawiki-extensions-DarkMode/resources/ext.DarkMode.js, with a slight modification to add the link to toggle dark mode through Javascript. The extension does it via MediaWiki hooks, which y'all cant do yourselves

1. Log into wiki
2. Click "Preferences"
3. Click onto the "Appearance" tab
4. Click "Custom CSS", edit that page and add the code below
5. Click "Custom JS", edit that page and add the code below

custom.css

#pt-darkmode-link a:before {
	 content: '\263E';
	 display: inline-block;
}
 .client-dark-mode {
	 background-color: #000;
}
 .client-dark-mode #pt-darkmode-link a:before {
	 content: '\263C';
}
 .client-dark-mode, .client-dark-mode img, .client-dark-mode video, .client-dark-mode svg, .client-dark-mode iframe, .client-dark-mode .mw-no-invert, .client-dark-mode .mw-mmv-overlay, .client-dark-mode .mw-mmv-pre-image, .client-dark-mode .mw-kartographer-map, .client-dark-mode .mw-kartographer-mapDialog-map {
	 filter: invert(1) hue-rotate(180deg);
	 -webkit-filter: invert(1) hue-rotate(180deg);
}
 .client-dark-mode .toc, .client-dark-mode .thumbinner, .client-dark-mode #simpleSearch, .client-dark-mode #searchInput, .client-dark-mode #searchButton, .client-dark-mode #searchGoButton, .client-dark-mode table, .client-dark-mode table.toccolours, .client-dark-mode .wikitable, .client-dark-mode .mw-notification {
	 background-color: #ddd;
}
 .client-dark-mode body, .client-dark-mode #mw-head, .client-dark-mode #mw-panel, .client-dark-mode #content.mw-body, .client-dark-mode h1, .client-dark-mode h2, .client-dark-mode h3, .client-dark-mode h4, .client-dark-mode h5, .client-dark-mode h6, .client-dark-mode .toc, .client-dark-mode div.thumbinner, .client-dark-mode #simpleSearch, .client-dark-mode #searchInput, .client-dark-mode table.toccolours, .client-dark-mode .mw-notification {
	 border-color: #cdcbc8;
}
 .client-dark-mode .thumbimage {
	 border: 0;
}
 .client-dark-mode a, .client-dark-mode #mw-panel .portal .body li a, .client-dark-mode .toctogglelabel, .client-dark-mode .mw-parser-output a.external, .client-dark-mode .mw-parser-output a.extiw, .client-dark-mode .mw-parser-output a.extiw:active {
	 color: #69f;
}
 .client-dark-mode a:visited, .client-dark-mode #mw-panel .portal .body li a:visited {
	 color: #709bbd;
}
 .client-dark-mode a.new, .client-dark-mode .new a {
	 color: #ff6e6e;
}
 .client-dark-mode .vectorTabs li a {
	 color: #69f;
}
 .client-dark-mode .infobox, .client-dark-mode .infobox_v2 {
	 background-color: #ddd;
	 border-color: #cdcbc8;
}
 .client-dark-mode .ambox-content {
	 background-color: #ddd;
	 border-color: #cdcbc8;
}
 

custom.js

$( function () {
	var darkMode = false;
  var $dark_mode_link = $('<li id="pt-darkmode-link"><a href="#">Toggle dark mode</a></li>');
  
  $( '#pt-logout' ).after($dark_mode_link);

	$dark_mode_link.find( 'a' ).on( 'click', function ( e ) {
		e.preventDefault();
		darkMode = !darkMode;

		$( document.documentElement ).toggleClass( 'client-dark-mode', darkMode );
		$( e.target ).text( darkMode ? 'Turn on the lights' : 'Turn off the lights' );
	} );
} );