MediaWiki:Common.js - Revision history

JonoThora: FusionGirl wiki theme toggle — dark/light localStorage-backed [Mecha Jono]

2026-03-15T20:40:42Z

FusionGirl wiki theme toggle — dark/light localStorage-backed [Mecha Jono]

← Older revision		Revision as of 13:40, 15 March 2026
Line 26:		Line 26:
	.text(isLight ? '\u25D1 Dark' : '\u2600 Light');		.text(isLight ? '\u25D1 Dark' : '\u2600 Light');

	/* Insert location: personal tools ~~area~~ (~~Vector 2022 top-~~right) */		/* Insert location: Monobook personal tools (right of username/login links) */
	var $~~personalTools~~ = $('#p-personal .vector-menu-content-list, .vector-user-links .vector-menu-content-list');		var $monoPersonal = $('#p-personal .pBody > ul');
	if ($~~personalTools~~.length) {		var $vecPersonal = $('#p-personal .vector-menu-content-list, .vector-user-links .vector-menu-content-list');

			if ($monoPersonal.length) {
			/* Monobook skin — append after last link (username or login) */
			var $li = $('<li>').addClass('mw-list-item').attr('id', 'pt-theme-toggle').append($btn);
			$monoPersonal.first().append($li);
			} else if ($vecPersonal.length) {
			/* Vector 2022 skin — prepend into personal tools */
	var $li = $('<li>').addClass('mw-list-item').css('margin-right', '8px').append($btn);		var $li = $('<li>').addClass('mw-list-item').css('margin-right', '8px').append($btn);
	$~~personalTools~~.first().prepend($li);		$vecPersonal.first().prepend($li);
	} else {		} else {
	/* Fallback: fixed position top-right */		/* Fallback: fixed position top-right */

JonoThora: FusionGirl wiki theme toggle — dark/light localStorage-backed [Mecha Jono]

2026-03-15T08:08:46Z

FusionGirl wiki theme toggle — dark/light localStorage-backed [Mecha Jono]

← Older revision		Revision as of 01:08, 15 March 2026
Line 22:		Line 22:
	.attr('id', 'fg-theme-toggle')		.attr('id', 'fg-theme-toggle')
	.attr('title', 'Toggle light / dark mode')		.attr('title', 'Toggle light / dark mode')
			.attr('aria-pressed', isLight ? 'true' : 'false')
			.attr('aria-label', 'Toggle light and dark color scheme')
	.text(isLight ? '\u25D1 Dark' : '\u2600 Light');		.text(isLight ? '\u25D1 Dark' : '\u2600 Light');

Line 47:		Line 49:
	localStorage.setItem('fg-theme', nowLight ? 'light' : 'dark');		localStorage.setItem('fg-theme', nowLight ? 'light' : 'dark');
	$btn.text(nowLight ? '\u25D1 Dark' : '\u2600 Light');		$btn.text(nowLight ? '\u25D1 Dark' : '\u2600 Light');
			$btn.attr('aria-pressed', nowLight ? 'true' : 'false');
	});		});
	});		});
	})();		})();

JonoThora: FusionGirl wiki theme toggle — dark/light localStorage-backed [Mecha Jono]

2026-03-15T07:41:02Z

FusionGirl wiki theme toggle — dark/light localStorage-backed [Mecha Jono]

New page

/* ================================================================
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');
});
});
})();