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.
mw.messages.set({
	'darkmode-turn-on-label': 'Dark mode',
	'darkmode-turn-on-tooltip': 'Turn on dark mode',
	'darkmode-turn-off-label': 'Light mode',
	'darkmode-turn-off-tooltip': 'Turn off dark mode',
});

$.when($.ready, mw.loader.using(['mediawiki.util', 'mediawiki.api', 'mediawiki.Uri', 'mediawiki.storage', 'es6-polyfills'])).then(function() {
	var inDarkMode = !!mw.user.options.get('gadget-dark-mode');

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

	function toggleMode() {
		var darkMode = !mw.user.options.get('gadget-dark-mode');
		new mw.Api().saveOption('gadget-dark-mode', darkMode ? '1' : '0');
		mw.user.options.set('gadget-dark-mode', darkMode ? 1 : 0);

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

		// Toggle portlet link label and tooltip
		var labelSelector = ['vector', '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'));

		// 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 gadgetsLinkElement = $('link[rel="stylesheet"][href*="ext.gadget."]').get(0);
		if (gadgetsLinkElement) {
			var uri = new mw.Uri(gadgetsLinkElement.href);
			if (darkMode) {
				uri.query.modules += ',dark-mode';
			} else {
				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
			}
			gadgetsLinkElement.href = uri.getRelativePath();
		} else {
			// No gadgets containing styles are enabled
			$('<link>').attr('rel', 'stylesheet')
				.attr('href', mw.util.wikiScript('load') + '?lang=' + mw.config.get('wgUserLanguage') +
					'&modules=ext.gadget.dark-mode&only=styles&skin=' + mw.config.get('skin')).appendTo('head');
		}
	}

	$('#pt-darkmode').on('click', function(e) {
		e.preventDefault();
		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') || 'light';

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

			if (systemSchemeNow !== systemSchemeLast && systemSchemeNow !== wpSchemeNow) {
				toggleMode();
			}
			mw.storage.set('dark-mode-system-scheme', 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);
		}
	}

});