/**  * 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'])).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'); 	}  	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', '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 scriptPath = mw.util.wikiScript('load'); 		var gadgetsLinkElement = $('link[rel="stylesheet"][href^="' + scriptPath + '?"][href*="ext.gadget."]')[0]; 		if (gadgetsLinkElement) { 			var uri = new mw.Uri(gadgetsLinkElement.href); 			if (newState) { 				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 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); 		} 	} });