MediaWiki:Gadget-Dark-Mode-Toggle.js
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/**
* Enables or disables the dark-mode gadget.
*
* Authors: User:SD0001, User:Nardog (from Wikipedia / Modified by Vish)
*/
if (!mw.messages.get('darkmode-turn-on-label')) {
if (mw.config.get('skin') == 'minerva') {
mw.messages.set({
'darkmode-turn-on-label': 'Dark mode',
'darkmode-turn-off-label': 'Light mode',
});
}
else {
mw.messages.set({
'darkmode-turn-on-label': '',
'darkmode-turn-off-label': '',
});
};
mw.messages.set({
'darkmode-turn-on-tooltip': 'Turn dark mode on',
'darkmode-turn-off-tooltip': 'Turn dark mode off',
});
}
$.when($.ready, mw.loader.using(['mediawiki.util', 'mediawiki.api', 'mediawiki.Uri', 'mediawiki.storage', 'es6-polyfills'])).then(function () {
var isOn = mw.loader.getState('ext.gadget.Nightmode') === 'ready';
if (isOn) {
// CSS class for externally styling elements in dark mode via TemplateStyles (or CSS from other gadgets or common.css)
// A brief flash of the original styles will occur, so this is only suitable for style changes for which flashes are tolerable.
// For others, update Gadget-dark-mode.css directly which is loaded without FOUCs
document.documentElement.classList.add('client-dark-mode');
// Update the initial mobile theme-color
$('meta[name="theme-color"]').attr('content', '#000000');
}
var onOrOff = isOn ? 'off' : 'on';
var label = mw.msg('darkmode-turn-' + onOrOff + '-label');
var tooltip = mw.msg('darkmode-turn-' + onOrOff + '-tooltip');
var nextnode = mw.config.get('skin') !== 'minerva' && '#pt-mytalk';
var broadcastChannel = new BroadcastChannel('gadget-Nightmode');
mw.util.addPortletLink('p-personal', '#', label, 'pt-darkmode', tooltip, '', nextnode);
mw.util.addPortletLink('p-personal-sticky-header', '#', label, 'pt-darkmode-sticky-header', tooltip, '', nextnode + '-sticky-header');
function toggleMode(offline) {
isOn = !isOn;
var newState = Number(isOn);
if (!offline) {
new mw.Api().saveOption('gadget-Nightmode', newState);
// Broadcast state change to other tabs
broadcastChannel.postMessage(isOn);
}
$(document.documentElement).toggleClass('client-dark-mode', isOn);
// In case the user navigates to another page too quickly
mw.storage.session.set('dark-mode-toggled', newState);
var onOrOff = ['on', 'off'][newState];
// Toggle portlet link label and tooltip
var labelSelector = ['vector', 'vector-2022', 'minerva'].includes(mw.config.get('skin')) ? '#pt-darkmode span:not(.mw-ui-icon), #pt-darkmode-sticky-header span:not(.mw-ui-icon)' : '#pt-darkmode a';
$(labelSelector).text(mw.msg('darkmode-turn-' + onOrOff + '-label'));
$('#pt-darkmode a, #pt-darkmode-sticky-header a').attr('title', mw.msg('darkmode-turn-' + onOrOff + '-tooltip'));
// Update the mobile theme-color
$('meta[name="theme-color"]').attr('content', isOn ? '#000000' : '#eaecf0');
// Modify the <link> element on the page to include/exclude dark-mode styles
// We can't use mw.loader as it doesn't work both ways (see talk page)
var scriptPath = mw.util.wikiScript('load');
var $gadgetsLink = $('link[rel="stylesheet"][href^="' + scriptPath + '?"][href*="ext.gadget."]');
if ($gadgetsLink.length) {
var uri = new mw.Uri($gadgetsLink.prop('href'));
if (isOn) {
uri.query.modules += ',Nightmode';
} else {
if (uri.query.modules === 'ext.gadget.Nightmode') {
// dark-mode is the only module in this link
$gadgetsLink.remove();
return;
}
uri.query.modules = uri.query.modules
.replace('ext.gadget.Nightmode,', 'ext.gadget.') // dark-mode is first in the gadget list
.replace(/,Nightmode(,|$)/, '$1'); // dark-mode is in middle or end of the list
}
$gadgetsLink.prop('href', uri.getRelativePath());
} else {
// No gadget-containing styles are enabled
$('<link>').attr({
rel: 'stylesheet',
href: scriptPath + '?lang=' + mw.config.get('wgUserLanguage') +
'&modules=ext.gadget.Nightmode&only=styles&skin=' + mw.config.get('skin')
}).appendTo(document.head);
}
}
$('#pt-darkmode, #pt-darkmode-sticky-header').on('click', function (e) {
e.preventDefault();
toggleMode();
});
// Recover state if the navigation was too quick
var storageState = mw.storage.session.get('dark-mode-toggled');
if (storageState && Number(storageState) !== Number(isOn)) {
toggleMode(true);
}
// Listen to dark mode state change made on other tabs
broadcastChannel.onmessage = function (msg) {
if (msg.data !== isOn) {
toggleMode(true);
}
};
if (window.wpDarkModeAutoToggle) {
var toggleBasedOnSystemColourScheme = function () {
var systemSchemeNow = matchMedia('(prefers-color-scheme: dark)').matches;
var systemSchemeLast = mw.storage.get('dark-mode-system-scheme') === '1';
if (systemSchemeNow !== systemSchemeLast) {
if (systemSchemeNow !== isOn) {
toggleMode();
}
mw.requestIdleCallback(function () {
mw.storage.set('dark-mode-system-scheme', Number(systemSchemeNow));
});
}
};
toggleBasedOnSystemColourScheme();
// If system colour scheme changes while user is viewing, toggle immediately
var mediaQuery = matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.addEventListener) {
mediaQuery.addEventListener('change', toggleBasedOnSystemColourScheme);
} else if (mediaQuery.addListener) { // Safari 13 and older
mediaQuery.addListener(toggleBasedOnSystemColourScheme);
}
}
});