Skip to content

Instantly share code, notes, and snippets.

@RJacksonm1

RJacksonm1/a_darkmode.md

Last active Oct 3, 2020
Embed
What would you like to do?
Dark mode via mediawiki Custom CSS and Custom JS

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
#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;
}
$( 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' );
} );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.