MediaWiki:Common.js
Jump to navigation
Jump to search
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.
/* ============================================
THEME TOGGLER
============================================ */
// 1. INSTANT EXECUTION (PREVENTS FLASH OF WRONG THEME)
// This runs the millisecond the script loads, before the body renders.
(function() {
var savedTheme = localStorage.getItem('mb-wiki-theme');
if (savedTheme === 'break') {
document.documentElement.classList.add('theme-break');
}
})();
// 2. DOM READY EXECUTION (UI BINDING)
$(function() {
var isBreak = document.documentElement.classList.contains('theme-break');
var $btn = $('<button>', {
id: 'theme-toggle',
class: 'floating-theme-toggle',
text: isBreak ? '✦ Switch to Mana' : '✦ Switch to Break',
title: 'Toggle Light/Dark Theme'
});
$('body').append($btn);
$btn.on('click', function() {
var $html = $('html');
if ($html.hasClass('theme-break')) {
// Switching to Mana (Light)
$html.removeClass('theme-break');
localStorage.setItem('mb-wiki-theme', 'mana');
$(this).text('✦ Switch to Break');
} else {
// Switching to Break (Dark)
$html.addClass('theme-break');
localStorage.setItem('mb-wiki-theme', 'break');
$(this).text('✦ Switch to Mana');
}
});
});