MediaWiki:Common.js

/* ===== DARK MODE TOGGLE ===== */
(function() {
    'use strict';

    function isDarkMode() {
        return localStorage.getItem('mw-dark-mode') === '1' ||
            (localStorage.getItem('mw-dark-mode') === null &&
             window.matchMedia('(prefers-color-scheme: dark)').matches);
    }

    function setDarkMode(on) {
        if (on) {
            document.body.classList.add('mw-dark-mode');
            localStorage.setItem('mw-dark-mode', '1');
        } else {
            document.body.classList.remove('mw-dark-mode');
            localStorage.setItem('mw-dark-mode', '0');
        }
        updateButton();
    }

    function updateButton() {
        var btn = document.getElementById('mw-dark-toggle');
        if (btn) {
            btn.textContent = document.body.classList.contains('mw-dark-mode') ? '☀️ Light' : '🌙 Dark';
        }
    }

    // Apply immediately (before full load) to prevent flash
    if (isDarkMode()) {
        document.body.classList.add('mw-dark-mode');
    }

    // Add toggle button to the personal tools area
    mw.loader.using('mediawiki.util', function() {
        var btn = document.createElement('button');
        btn.id = 'mw-dark-toggle';
        btn.textContent = isDarkMode() ? '☀️ Light' : '🌙 Dark';
        btn.title = 'Toggle dark mode';
        btn.addEventListener('click', function() {
            setDarkMode(!document.body.classList.contains('mw-dark-mode'));
        });

        // Try to place it near the search bar or personal tools
        var target = document.querySelector('.vector-search-box') ||
                     document.querySelector('#p-personal') ||
                     document.querySelector('.mw-header');
        if (target) {
            target.parentNode.insertBefore(btn, target.nextSibling);
        }
    });

    // Listen for OS-level dark mode changes
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
        if (localStorage.getItem('mw-dark-mode') === null) {
            setDarkMode(e.matches);
        }
    });
})();