MediaWiki:Gadget-DarkToggle.js: Difference between revisions

From Halopedia, the Halo wiki

No edit summary
mNo edit summary
Line 22: Line 22:
if (window.matchMedia('(prefers-color-scheme: dark)').matches)
if (window.matchMedia('(prefers-color-scheme: dark)').matches)
$('body').addClass('dark');
$('body').addClass('dark');
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
window.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) {
if (e.matches)
if (e.matches)
$('body').addClass('dark');
$('body').addClass('dark');
Line 33: Line 33:
isDark = true;
isDark = true;
if (mw.config.get('skin') == 'nimbus')
if (mw.config.get('skin') == 'nimbus')
$('#wiki-login').prepend('<div id="toggleContainer" style="float:left; position:relative; right:5px; cursor:pointer"><img id="themeToggle" src="https://halo.wiki.gallery/images/moon-' + (isDark ? 'yellow' : 'white') + '.png" title="Toggle night theme"/></div>');
$('#wiki-login').prepend('<div id="toggleContainer" style="float:left; position:relative; right:5px; cursor:pointer"><img id="themeToggle" src="https://www.halopedia.org/images/moon-' + (isDark ? 'yellow' : 'white') + '.png" title="Toggle night theme"/></div>');
else if (mw.config.get('skin') == 'minerva') {
else if (mw.config.get('skin') == 'minerva') {
$('#footer-places-desktop-toggle').addClass('beforeNight');
$('#footer-places-desktop-toggle').addClass('beforeNight');
Line 39: Line 39:
} else if (mw.config.get('skin') == 'timeless')
} else if (mw.config.get('skin') == 'timeless')
$('#f-list').append('<br id="nightBreak" style="display:none"><li id="toggleContainer" style="cursor:pointer"><a id="themeToggle" href="javascript:;">Toggle night theme</a></li>');
$('#f-list').append('<br id="nightBreak" style="display:none"><li id="toggleContainer" style="cursor:pointer"><a id="themeToggle" href="javascript:;">Toggle night theme</a></li>');
$('#themeToggle').click(function () {
$('#themeToggle').click(function() {
setCookie('darkTheme', isDark ? '' : 'on', 999);
setCookie('darkTheme', isDark ? '' : 'on', 999);
location.reload();
location.reload();
});
});
});
});

Revision as of 14:05, July 16, 2021

// 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() {
	if (window.matchMedia('(prefers-color-scheme: dark)').matches)
		$('body').addClass('dark');
	window.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) {
		if (e.matches)
			$('body').addClass('dark');
		else
			$('body').removeClass('dark');
	});

	var isDark = false;
	if (getCookie('darkTheme') == 'on')
		isDark = true;
	if (mw.config.get('skin') == 'nimbus')
		$('#wiki-login').prepend('<div id="toggleContainer" style="float:left; position:relative; right:5px; cursor:pointer"><img id="themeToggle" src="https://www.halopedia.org/images/moon-' + (isDark ? 'yellow' : 'white') + '.png" title="Toggle night theme"/></div>');
	else if (mw.config.get('skin') == 'minerva') {
		$('#footer-places-desktop-toggle').addClass('beforeNight');
		$('#footer-places-desktop-toggle').after('<li id="toggleContainer" style="cursor:pointer"><a id="themeToggle" href="javascript:;">Toggle night theme</a></li>');
	} else if (mw.config.get('skin') == 'timeless')
		$('#f-list').append('<br id="nightBreak" style="display:none"><li id="toggleContainer" style="cursor:pointer"><a id="themeToggle" href="javascript:;">Toggle night theme</a></li>');
	$('#themeToggle').click(function() {
		setCookie('darkTheme', isDark ? '' : 'on', 999);
		location.reload();
	});
});