MediaWiki:Gadget-darkmode.js

In other languages

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

Google Chrome, Firefox, Microsoft Edge, and Safari: Hold down the key and click the Reload toolbar button.
For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/**
 * Toggle for dark mode
 * 
 * @author [[User:Jayden]]
 * @see Based on https://runescape.wiki/w/MediaWiki:Gadget-skinTogglesNew.js
 */
;(function($,mw){
varDARK_COOKIE='darkmode',
THEME_COOKIE='theme',
isUsingDarkmode=$.cookie(THEME_COOKIE)==='dark'||($.cookie(THEME_COOKIE)==null&&$.cookie(DARK_COOKIE)==='true'),
isMobile=mw.config.get('wgMFMode')!==null,
portletLink;
varself={
init:function(){
$.cookie(THEME_COOKIE,isUsingDarkmode?'dark':'light',{expires:365,path:'/'});
document.documentElement.classList.remove(`skin-theme-clientpref-${isUsingDarkmode?'day':'night'}`);
document.documentElement.classList.add(`skin-theme-clientpref-${isUsingDarkmode?'night':'day'}`);
portletLink=mw.util.addPortletLink(
(isMobile?'p-navigation':'p-personal'),
'',
(isMobile?'Toggle dark mode':''),
'pt-dm-toggle',
'Toggle dark mode',
null,
$('#pt-userpage, #pt-anonuserpage, #pt-createaccount')[0]
);
$(portletLink).find('a').click(function(e){
e.preventDefault();
isUsingDarkmode=!isUsingDarkmode;
$.cookie(THEME_COOKIE,isUsingDarkmode?'dark':'light',{expires:365,path:'/'});
$.cookie(DARK_COOKIE,isUsingDarkmode,{expires:365,path:'/'});
if(isUsingDarkmode===true){
mw.loader.using(['wgl.theme.dark']).then(function(){
$('body').addClass('wgl-theme-dark')
$('body').removeClass('wgl-theme-light')
mw.hook('wgl.themeChanged').fire('dark')
document.documentElement.classList.remove('skin-theme-clientpref-day')
document.documentElement.classList.add('skin-theme-clientpref-night')
});
}else{
$('body').addClass('wgl-theme-light')
$('body').removeClass('wgl-theme-dark')
mw.hook('wgl.themeChanged').fire('light')
document.documentElement.classList.remove('skin-theme-clientpref-night')
document.documentElement.classList.add('skin-theme-clientpref-day')
}
});
}
}
$(self.init);
}(jQuery,mediaWiki));