MediaWiki:Common.js

/* ================================================================
   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')
      .attr('aria-pressed', isLight ? 'true' : 'false')
      .attr('aria-label', 'Toggle light and dark color scheme')
      .text(isLight ? '\u25D1 Dark' : '\u2600 Light');

    /* Insert location: Monobook personal tools (right of username/login links) */
    var $monoPersonal = $('#p-personal .pBody > ul');
    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);
      $vecPersonal.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');
      $btn.attr('aria-pressed', nowLight ? 'true' : 'false');
    });
  });
})();