MediaWiki:Common.js: Difference between revisions

Amend dark mode code
(Add Dark mode link to Wiki tools menu)
(Amend dark mode code)
Line 544: Line 544:
   }
   }
}
}
function toggleDarkMode() {
document.body.classList.toggle('darkMode');
localStorage.setItem('darkMode', localStorage.getItem('darkMode') !== 'true');
}
$(document).ready(function () {
$(document).ready(function () {
if (document.getElementsByClassName("stickyHeader").length > 0) {
if (document.getElementsByClassName('stickyHeader').length > 0) {
setStickyHeaderTop();
setStickyHeaderTop();
$(window).resize(setStickyHeaderTop);
$(window).resize(setStickyHeaderTop);
}
}


const darkMode = localStorage.getItem("darkMode");
const darkMode = localStorage.getItem('darkMode');
if (darkMode === "true") {
if (darkMode === 'true') {
document.body.classList.add("darkMode");
document.body.classList.add('darkMode');
} else {
} else {
document.body.classList.remove("darkMode");
document.body.classList.remove('darkMode');
}
}
$("#personal-inner").append('<button onClick="toggleDarkMode();" style="margin:.5rem!important;">Toggle Dark Mode</button>');
});
});


// Add dark mode link to "Wiki tools" menu
// Add dark mode links to "Wiki tools" and personal tools menus
$.when(mw.loader.using(['mediawiki.util']), $.ready).then( function() {
$.when(mw.loader.using(['mediawiki.util']), $.ready).then( function() {
var darkModeLink = mw.util.addPortletLink('p-tb', '#', 'Toggle Dark Mode');
var dmLinkTools = mw.util.addPortletLink('p-tb', '#', 'Dark mode', 't-darkmode', 'Toggle between a dark and light theme', null, '#t-specialpages');
$(darkModeLink).on('click', function(e) {
var dmLinkPersonal = mw.util.addPortletLink('p-personal', '#', 'Dark mode', 'pt-darkmode', 'Toggle between a dark and light theme', null, null);
dmLinkPersonal.style.marginTop = '0.5rem';
$(dmLinkTools).on('click', function(e) {
e.preventDefault();
e.preventDefault();
toggleDarkMode();
toggleDarkMode();
})
});
$(dmLinkPersonal).on('click', function(e) {
e.preventDefault();
toggleDarkMode();
});
} );
} );
function toggleDarkMode() {
const darkMode = localStorage.getItem("darkMode");
if (darkMode !== "true") {
    localStorage.setItem("darkMode", true);
document.body.classList.add("darkMode");
} else {
    localStorage.setItem("darkMode", false);
document.body.classList.remove("darkMode");
}
}