MediaWiki:Gadget-dark-mode-toggle.js: Difference between revisions

Revision as of 16:47, 21 December 2021

Revision as of 16:18, 25 December 2021

Line 5:

*/

// 'Dark mode' and 'Light mode' messages must match the ::before content in
// [[MediaWiki:Gadget-dark-mode-toggle-pagestyles.css]] and [[MediaWiki:Gadget-dark-mode.css]], respectively.

mw.messages.set({

'darkmode-turn-on-label': 'Dark mode',

'darkmode-turn-on-tooltip': 'Turn on dark mode on',

'darkmode-turn-off-label': 'Light mode',

'darkmode-turn-off-tooltip': 'Turn off dark mode off',

});

$.when($.ready, mw.loader.using(['mediawiki.util', 'mediawiki.api', 'mediawiki.Uri', 'mediawiki.storage', 'es6-polyfills'])).then(function() {

var inDarkModeisOn = !!mw.user.options.get('gadget-dark-mode');

if (isOn) {

var onOrOff = inDarkMode ? 'off' : 'on';

// 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');

}

var onOrOff = inDarkModeisOn ? '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' ? null :&& '#pt-watchlist';

var portletLink = mw.util.addPortletLink('p-personal', '#', label, 'pt-darkmode', tooltip, '', nextnode);

function toggleMode() {

var darkModenewState = Number(!mw.user.options.get('gadget-dark-mode'));

new mw.Api().saveOption('gadget-dark-mode', darkMode ? '1' : '0'newState);

mw.user.options.set('gadget-dark-mode', darkMode ? 1 : 0newState);

$(document.documentElement).toggleClass('client-dark-mode', !!newState);

// In case the user navigates to another page too quickly

var onOrOff = darkMode ? 'off' : 'on';

mw.storage.session.set('dark-mode-system-schemetoggled', systemSchemeNownewState);

var onOrOff = darkMode ? ['offon' :, 'onoff'][newState];

// Toggle portlet link label and tooltip

Line 36 ⟶ 48:

// 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 gadgetsLinkElement = $('link[rel="stylesheet"][href^="' + scriptPath + '?"][href*="ext.gadget."]').get([0)];

if (gadgetsLinkElement) {

var uri = new mw.Uri(gadgetsLinkElement.href);

if (darkModenewState) {

uri.query.modules += ',dark-mode';

} else {

Line 48 ⟶ 61:

gadgetsLinkElement.href = uri.getRelativePath();

} else {

// No gadgets gadget-containing styles are enabled

$('<link>').attr('{
rel',: 'stylesheet'),

.attr('href',: mw.util.wikiScript('load')scriptPath + '?lang=' + mw.config.get('wgUserLanguage') +

'&modules=ext.gadget.dark-mode&only=styles&skin=' + mw.config.get('skin')
}).appendTo('document.head');

}

}

$('#pt-darkmode'portletLink).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();

}

if (window.wpDarkModeAutoToggle) {

var toggleBasedOnSystemColourScheme = function () {

var systemSchemeNow = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

var systemSchemeLast = mw.storage.get('dark-mode-system-scheme') ||=== 'light1';

var wpSchemeNow = !!mw.user.options.get('gadget-dark-mode') ? 'dark' : 'light';

if (systemSchemeNow !== systemSchemeLast) &&{
if (systemSchemeNow !== wpSchemeNow) {

toggleMode();

}

mw.requestIdleCallback(function() {

mw.storage.set('dark-mode-system-scheme', Number(systemSchemeNow));

});

}

mw.storage.set('dark-mode-system-scheme', systemSchemeNow);

};

Line 83 ⟶ 108:

}

}

});