MediaWiki:Gadget-toggleDarkMode.js

 ;(function($, mw) {
	 var DARKMODE_COOKIE = "darkmode",
	 	 currentDark = localStorage.getItem(DARKMODE_COOKIE),
		 portletLink,
		 darkSwitch,
		 formMade;

	 var self = {
		 init: function() {
			portletLink = mw.util.addPortletLink(
				'p-personal',
				'',
				'',
				'pt-skin-toggles',
				'Toggle darkmode',
				null,
				$('#pt-userpage, #pt-anonuserpage')
			);
			$(portletLink).find('a').addClass('oo-ui-icon-advanced').add('.floor-convention').click(function(e) {
				e.preventDefault();
				if (!formMade) {
					mw.loader.using(['oojs-ui-core','oojs-ui-windows','oojs-ui-widgets']).then(self.initForm);
				} else {
					window.OOUIWindowManager.openWindow('skin');
				}
		 	})
		},
		initForm: function() {
			darkSwitch = new OO.ui.ButtonSelectWidget({
				classes: ['appearance-buttons'],
				items: [
					new OO.ui.ButtonOptionWidget({
						classes: ['light-mode-button'],
						data: false,
						label: new OO.ui.HtmlSnippet('<div class="button-img"></div><div class="button-text">Light</div><div class="button-text-selected"></div>'),
					}),
					new OO.ui.ButtonOptionWidget({
						classes: ['dark-mode-button'],
						data: true,
						label:new OO.ui.HtmlSnippet('<div class="button-img"></div><div class="button-text">Dark</div><div class="button-text-selected"></div>'),
						//disabled: true
					}),
				]
			});

			darkSwitch.selectItemByData(currentDark);

			applyButton = new OO.ui.ButtonInputWidget({
				label: 'Save',
				flags: ['primary', 'progressive'],
				classes: ['skin-save-button']
			});

			applyButton.on('click', function(){
				
			});

			cancelButton = new OO.ui.ButtonInputWidget({ label: 'Cancel', flags: 'destructive'});
			
			$content = $('<div>');
			$content
				.addClass('appearance-modal tile')
				.append(
					$('<h2>').text('Appearance'),
					$('<div>')
						.addClass('appearance-buttons')
						.append(darkSwitch.$element),
					$('<div>')
						.addClass('reader-mode')
						.append(
							darkConditionalSwitch.$element,
							$('<div>').addClass('setting-header dark-conditional-header').text('Automatic dark mode'),
							$('<p>').addClass('dark-conditional-desc').text('Automatically switch to dark mode from 19:00 to 7:00 local time. Disables the manual setting above.'),
							readerSwitch.$element,
							$('<div>').addClass('setting-header reader-mode-header').text('Reader mode'),
							$('<p>').addClass('reader-mode-desc').text('Increase the font size and switch the wiki to a fixed-width layout. Incompatible with sticky headers.'),
							stickySwitch.$element,
							$('<div>').addClass('setting-header sticky-header-header').text('Sticky header'),
							$('<p>').addClass('sticky-header-desc').text('Pin the navigation bar and search to the top when scrolling. Incompatible with reader mode.'),
							floorSelect.$element,
							$('<div>').addClass('setting-header floornumber-header').text('Floor numbering'),
							$('<p>').addClass('floornumber-desc').text(floorSelectHelp)
						),
					$('<div>')
						.addClass('appearance-save')
						.append(
							$('<p>').addClass('save-button-desc').html('Saving these changes will reload the page and set <a href="https://weirdgloop.org/privacy">personalisation cookies</a>.'),
							$('<div>').addClass('save-button-container')
								.append(applyButton.$element)
								.append(cancelButton.$element)
						)
				);

			var initModal = function (modal) {
				modal.$body.append( $content );
				cancelButton.on('click', function(modal){window.OOUIWindowManager.closeWindow(modal);}, [modal]);
			};
			
			formMade = true;
		}
	}
	mw.loader.using(['mediawiki.util'], function () {
		$(self.init);
	})

 }(jQuery, mediaWiki));