MediaWiki:Common.js
From FusionGirl Wiki
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.
/* ================================================================
FusionGirl Wiki — Theme Toggle (Dark/Light)
Dark mode is the DEFAULT. Light mode is opt-in via toggle.
Preference stored in localStorage.
================================================================ */
(function () {
'use strict';
/* ── 1. Apply stored preference BEFORE paint ── */
var stored = localStorage.getItem('fg-theme');
if (stored === 'light') {
document.documentElement.classList.add('fg-light-mode');
}
/* dark is the default — no class needed */
/* ── 2. Wait for DOM, then create toggle ── */
$(function () {
var isLight = document.documentElement.classList.contains('fg-light-mode');
/* Build toggle button */
var $btn = $('<button>')
.attr('id', 'fg-theme-toggle')
.attr('title', 'Toggle light / dark mode')
.text(isLight ? '\u25D1 Dark' : '\u2600 Light');
/* Insert location: personal tools area (Vector 2022 top-right) */
var $personalTools = $('#p-personal .vector-menu-content-list, .vector-user-links .vector-menu-content-list');
if ($personalTools.length) {
var $li = $('<li>').addClass('mw-list-item').css('margin-right', '8px').append($btn);
$personalTools.first().prepend($li);
} else {
/* Fallback: fixed position top-right */
$btn.css({
position: 'fixed',
top: '12px',
right: '12px',
zIndex: 10000
});
$('body').append($btn);
}
/* ── 3. Toggle handler ── */
$btn.on('click', function () {
var html = document.documentElement;
html.classList.toggle('fg-light-mode');
var nowLight = html.classList.contains('fg-light-mode');
localStorage.setItem('fg-theme', nowLight ? 'light' : 'dark');
$btn.text(nowLight ? '\u25D1 Dark' : '\u2600 Light');
});
});
})();
