View source for MediaWiki:Gadget-DarkToggle.js

// Toggle a dark theme for supported skins

function setCookie(c_name, value, expiredays) {
	var exdate = new Date();
	exdate.setDate(exdate.getDate() + expiredays);
	document.cookie = c_name + '=' + escape(value) + ';path=/' + ((expiredays === null) ? '' : ';expires=' + exdate.toGMTString());
}
function getCookie(c_name) {
	if (document.cookie.length > 0) {
		c_start = document.cookie.indexOf(c_name + '=');
		if (c_start != -1) {
			c_start = c_start + c_name.length + 1;
			c_end = document.cookie.indexOf(';', c_start);
			if (c_end == -1) c_end = document.cookie.length;
			return unescape(document.cookie.substring(c_start, c_end));
		}
	}
	return '';
}

$(function() {
	var disablingGadgets = ['DarkMode'];
	for (var i = 0; i < disablingGadgets.length; i++)
		if (mw.user.options.get('gadget-' + disablingGadgets[i]))
			return;

	if (!getCookie('darkTheme')) {
		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
			$('body').addClass('dark');
			$('body').removeClass('light');
		}
		window.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) {
			if (e.matches) {
				$('body').addClass('dark');
				$('body').removeClass('light');
			} else {
				$('body').removeClass('dark');
				$('body').addClass('light');
			}
		});
	}

	var isDark = false;
	var toggleText = 'Dark mode';
	if (getCookie('darkTheme') == 'on' || !getCookie('darkTheme') && window.matchMedia('(prefers-color-scheme: dark)').matches) {
		toggleText = 'Light mode';
		isDark = true;
	}

	if (mw.config.get('skin') == 'nimbus') {
		$('#wiki-login').prepend('<div id="toggleContainer" style="float:left"><a id="toggleLink" href="javascript:;" title="Toggle night theme"><img id="toggleImage" src="https://wiki.gallery/images/dark/moon/' + (isDark ? 'yellow' : 'white') + '.png"/></a></div>');
	} else if (mw.config.get('skin') == 'minerva')
		$('#footer-places').after('<ul id="toggleContainer" class="minerva-toggle hlist"><li><a id="toggleLink" href="javascript:;">Toggle night theme</a></li></ul>');
	else if (mw.config.get('skin') == 'timeless' || mw.config.get('skin') == 'vector-2022')
		$('#footer-places').append('<li id="toggleContainer"><a id="toggleLink" href="javascript:;">' + toggleText + '</a></li>');
	else {
		$('#p-personal ul').prepend('<li id="toggleContainer" class="mw-list-item"><a id="toggleLink" style="background:none" href="javascript:;" title="Toggle night theme"><img id="toggleImage" src="https://wiki.gallery/images/dark/moon/' + (isDark ? 'yellow' : 'white') + '.png"/></a></li>');
	}

	$('#toggleLink').click(function() {
		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
			if (isDark)
				setCookie('darkTheme', 'off', 999);
			else
				setCookie('darkTheme', '', -1);
		} else {
			if (isDark)
				setCookie('darkTheme', '', -1);
			else
				setCookie('darkTheme', 'on', 999);
		}
		if (mw.config.get('wgUserId') || location.href.includes('?'))
			location.reload();
		else
			location = location.href + '?toggle';
	});
});
Description	What you type	What you get
Italic	''Italic text''	Italic text
Bold	'''Bold text'''	Bold text
Bold & italic	'''''Bold & italic text'''''	*Bold & italic text*