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

Revision as of 13:04, 31 October 2022

Revision as of 03:15, 4 November 2022

Line 18:

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

var isOn = !!mw.userloader.options.getgetState('ext.gadget-.dark-mode') === 'ready';

if (isOn) {

Line 34:

var tooltip = mw.msg('darkmode-turn-' + onOrOff + '-tooltip');

var nextnode = mw.config.get('skin') !== 'minerva' && '#pt-watchlist';

var wpSchemeNowbroadcastChannel = !!mw.user.options.getnew BroadcastChannel('gadget-dark-mode');

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(!mw.user.options.get('gadget-dark-mode'));

var newState = Number(isOn);

new mw.Api().saveOption('gadget-dark-mode', newState);

if (!offline) {

mw.user.options.set('gadget-dark-mode', newState);

$(document new mw.documentElementApi().toggleClasssaveOption('clientgadget-dark-mode', !!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

Line 53 ⟶ 60:

$('#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', newStateisOn ? '#000000' : '#eaecf0');

// Modify the <link> element on the page to include/exclude dark-mode styles

Line 61 ⟶ 68:

if ($gadgetsLink.length) {

var uri = new mw.Uri($gadgetsLink.prop('href'));

if (newStateisOn) {

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

} else {

Line 92 ⟶ 99:

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) {

Line 99 ⟶ 116:

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

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

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

if (systemSchemeNow !== systemSchemeLast) {

if (systemSchemeNow !== wpSchemeNowisOn) {

toggleMode();

}