Article snapshot taken from Wikipedia with creative commons attribution-sharealike license.
Give it a read and then ask your questions in the chat.
We can research this topic together.
var inDarkMode = !!mw.user.options.get('gadget-dark-mode');
var inDarkMode = !!mw.user.options.get('gadget-dark-mode');
Latest revision as of 19:28, 19 January 2024
/**
* Enables or disables the dark-mode gadget.
*
* Authors: ], ]
*/
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',
});
$.when($.ready, mw.loader.using()).then(function() {
var inDarkMode = !!mw.user.options.get('gadget-dark-mode');
var onOrOff = inDarkMode ? 'off' : 'on';
var label = mw.msg('darkmode-turn-' + onOrOff + '-label');
var tooltip = mw.msg('darkmode-turn-' + onOrOff + '-tooltip');
var portlet = mw.config.get('skin') === 'minerva' ? 'pt-preferences' : 'p-cactions';
mw.util.addPortletLink(portlet, '#', label, 'pt-darkmode', tooltip);
function toggleMode() {
var darkMode = !mw.user.options.get('gadget-dark-mode');
new mw.Api().saveOption('gadget-dark-mode', darkMode ? '1' : '0');
mw.user.options.set('gadget-dark-mode', darkMode ? 1 : 0);
var onOrOff = darkMode ? 'off' : 'on';
// Toggle portlet link label and tooltip
var labelSelector = .includes(mw.config.get('skin')) ? '#pt-darkmode span' : '#pt-darkmode a';
$(labelSelector).text(mw.msg('darkmode-turn-' + onOrOff + '-label'));
$('#pt-darkmode a').attr('title', mw.msg('darkmode-turn-' + onOrOff + '-tooltip'));
// Modify the <link> element on the page to include/exclude dark-mode styles
// We can't use mw.loader as it doesn't work both ways (see talk page)
var gadgetsLinkElement = $('link').get(0);
if (gadgetsLinkElement) {
var uri = new mw.Uri(gadgetsLinkElement.href);
if (darkMode) {
uri.query.modules += ',dark-mode';
} else {
uri.query.modules = uri.query.modules
.replace('ext.gadget.dark-mode', 'ext.gadget.') // dark-mode is first in the gadget list
.replace(/,dark-mode(,|$)/, '$1'); // dark-mode is in middle or end of the list
}
gadgetsLinkElement.href = uri.getRelativePath();
} else {
// No gadgets containing styles are enabled
$('<link>').attr('rel', 'stylesheet')
.attr('href', '/w/load.php?lang=' + mw.config.get('wgUserLanguage') +
'&modules=ext.gadget.dark-mode&only=styles&skin=' + mw.config.get('skin')).appendTo('head');
}
}
$('#pt-darkmode').on('click', function(e) {
e.preventDefault();
toggleMode();
});
if (window.wpDarkModeAutoToggle) {
var toggleBasedOnSystemColourScheme = function () {
var systemSchemeNow = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
var systemSchemeLast = mw.storage.get('dark-mode-system-scheme') || 'light';
var wpSchemeNow = mw.user.options.get('gadget-dark-mode') ? 'dark' : 'light';
if (systemSchemeNow !== systemSchemeLast && systemSchemeNow !== wpSchemeNow) {
toggleMode();
}
mw.storage.set('dark-mode-system-scheme', systemSchemeNow);
};
toggleBasedOnSystemColourScheme();
// If system colour scheme changes while user is viewing, toggle immediately
var mediaQuery = matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.addEventListener) {
mediaQuery.addEventListener('change', toggleBasedOnSystemColourScheme);
} else if (mediaQuery.addListener) { // Safari 13 and older
mediaQuery.addListener(toggleBasedOnSystemColourScheme);
}
}
});
/* scrolls to the top of the page whenever the escape key is pressed. */
/* by User:Slo44 */
document.addEventListener("keydown", (event) => {
if (event.key.toLowerCase() == "escape") {
window.scrollTo(0, 0);
}
})