MediaWiki:Gadget-skinTogglesMobile.js

< Gadgets-definition

After saving, you may need to bypass your browser's cache to see the changes. For further information, see Wikipedia:Bypass your cache.

In most Windows and Linux browsers: Hold down Ctrl and press F5.
In Safari: Hold down ⇧ Shift and click the Reload button.
In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.

/**
 * Toggles for skin cookies on mobile
 * 
 * @author JaydenKieran
 * 
 */

const DARK_COOKIE = 'darkmode';
var currentDark = $.cookie('theme') === 'dark' || ($.cookie('theme') == null && $.cookie(DARK_COOKIE) === 'true'),
	darkPortletLink;

var self = {
	init: function () {
		darkPortletLink = mw.util.addPortletLink(
			'p-personal',
			'#',
			(currentDark ? 'Light' : 'Dark') + ' mode',
			'wgl-darkmode-toggle',
			'Toggle ' + (currentDark ? 'light' : 'dark') + ' mode',
			null,
			$('a.menu__item--logout').closest('li')
		);
		
		$('meta[name="theme-color"]').attr('content', currentDark ? '#071022' : '#c0a886');

		$.cookie('theme', currentDark ? 'dark' : 'light', {expires: 365, path: '/'});
		
		$(darkPortletLink).click(function (e) {
			e.preventDefault();
			currentDark = !currentDark;
			$('#wgl-darkmode-toggle .toggle-list-item__label').text((currentDark ? 'Light' : 'Dark') + ' mode');
			$.cookie('theme', currentDark ? 'dark' : 'light', {expires: 365, path: '/'});
			$.cookie(DARK_COOKIE, currentDark, {expires: 365, path: '/'});
			$('meta[name="theme-color"]').attr('content', currentDark ? '#071022' : '#c0a886');
			
			if (currentDark) {
				mw.loader.using(['wgl.theme.dark']).then(function() {
					$('body').addClass('wgl-theme-dark').removeClass('wgl-theme-light')
				});
			} else {
				$('body').addClass('wgl-theme-light').removeClass('wgl-theme-dark')
			}
			mw.notify( 'Switched to ' + (currentDark ? 'dark' : 'light') + ' mode!', { tag: 'wg-darkmode-notification' } );
		});
	},
}

$(self.init);