MediaWiki:Gadget-dark-mode-toggle.js

/**
 * Enables or disables the dark-mode gadget.
 *
 * Authors: [[User:SD0001]], [[User:Nardog]]
 */

// '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.
// Don't overwrite existing messages, if already set on a foreign wiki prior to loading this file
if (!mw.messages.get('darkmode-turn-on-label')) {
	mw.messages.set({
		'darkmode-turn-on-label': 'Dark mode',
		'darkmode-turn-on-tooltip': 'Turn dark mode on',
		'darkmode-turn-off-label': 'Light mode',
		'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.user.options.get('gadget-dark-mode');

	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-watchlist';
	var portletLink = mw.util.addPortletLink('p-personal', '#', label, 'pt-darkmode', tooltip, '', nextnode);

	function toggleMode() {
		var newState = Number(!mw.user.options.get('gadget-dark-mode'));
		new mw.Api().saveOption('gadget-dark-mode', newState);
		mw.user.options.set('gadget-dark-mode', newState);
		$(document.documentElement).toggleClass('client-dark-mode', !!newState);

		// 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 a';
		$(labelSelector).text(mw.msg('darkmode-turn-' + onOrOff + '-label'));
		$('#pt-darkmode a').attr('title', mw.msg('darkmode-turn-' + onOrOff + '-tooltip'));
		// Update the mobile theme-color
		$('meta[name="theme-color"]').attr('content', newState ? '#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 (newState) {
				uri.query.modules += ',dark-mode';
			} else {
				if (uri.query.modules === 'ext.gadget.dark-mode') {
					// dark-mode is the only module in this link
					$gadgetsLink.remove();
					return;
				}
				uri.query.modules = uri.query.modules
					.replace('ext.gadget.dark-mode,', 'ext.gadget.') // dark-mode is first in the gadget list
					.replace(/,dark-mode(,|$)/, '$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.dark-mode&only=styles&skin=' + mw.config.get('skin')
			}).appendTo(document.head);
		}
	}

	$(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;
			var systemSchemeLast = mw.storage.get('dark-mode-system-scheme') === '1';

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

			if (systemSchemeNow !== systemSchemeLast) {
				if (systemSchemeNow !== wpSchemeNow) {
					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);
		}
	}
});