User:Michael/dark-mode-toggle.js

From McGough's Recipes

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/**
 * Enables or disables the dark mode gadget.
 */
 
mw.messages.set({
	'darkmode-turn-on-label': 'Dark mode',
	'darkmode-turn-on-tooltip': 'Turn on dark mode',
	'darkmode-turn-off-label': 'Light mode',
	'darkmode-turn-off-tooltip': 'Turn off dark mode',
	'darkmode-turning-on': 'Enabling dark mode ...',
	'darkmode-turning-off': 'Disabling dark mode ...'
});
	
$.when($.ready, mw.loader.using(['mediawiki.util', 'mediawiki.api'])).then(function() {
    var inDarkMode = !!mw.user.options.get('gadget-dark-mode');

    var linkText = inDarkMode ? mw.msg('darkmode-turn-off-label') : mw.msg('darkmode-turn-on-label');

    mw.util.addPortletLink('p-cactions', '#', linkText, 'pt-darkmode', inDarkMode ? mw.msg('darkmode-turn-off-tooltip') : mw.msg('darkmode-turn-on-tooltip'), 'np');

    $('#pt-darkmode').on('click', function(e) {
        e.preventDefault();
        
        mw.notify(inDarkMode ? mw.msg('darkmode-turning-off') : mw.msg('darkmode-turning-on'));
       
        new mw.Api().saveOption('gadget-dark-mode', inDarkMode ? '0' : '1').then(function() { 
	    	location.reload(); 
	    });
    });
});