MediaWiki:Common.js

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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* =====================================================
   EARLY THEME APPLICATION (Prevents FOUC as much as possible)
===================================================== */

(function () {
    try {
        const savedTheme = localStorage.getItem('lt-theme');

        if (savedTheme === 'mementos') {
            document.documentElement.classList.add('theme-mementos');
        } else if (savedTheme === 'courtroom') {
            document.documentElement.classList.add('theme-courtroom');
        }
    } catch (e) {}
})();

console.log("Theme system loaded");

/* =====================================================
   MAIN LOGIC
===================================================== */

mw.loader.using(['mediawiki.util']).then(function () {

    console.log("mw loader ready");

    /* ======================
       APPLY THEME
    ====================== */

    function applyTheme(theme, skipSave) {

        document.documentElement.classList.remove('theme-courtroom', 'theme-mementos');

        if (theme === 'mementos') {
            document.documentElement.classList.add('theme-mementos');
        }

        if (theme === 'courtroom') {
            document.documentElement.classList.add('theme-courtroom');
        }

        if (!skipSave) {
            localStorage.setItem('lt-theme', theme);
        }

        updateThemeSelection(theme);
    }

    /* ======================
       UPDATE BUTTON STATE
    ====================== */

    function updateThemeSelection(theme) {

        const buttons = document.querySelectorAll('.lt-theme-button');

        buttons.forEach(function (btn) {
            btn.classList.remove('is-active');
        });

        const active = document.querySelector('[data-theme="' + theme + '"]');

        if (active) {
            active.classList.add('is-active');
        }
    }

    /* ======================
       INJECT MENU
    ====================== */

    function injectThemeControls(container) {

        if (document.getElementById('custom-theme-menu')) return;

        const wrapper = document.createElement('div');
        wrapper.id = 'custom-theme-menu';
        wrapper.className = 'mw-portlet citizen-menu';

        const heading = document.createElement('div');
        heading.className = 'citizen-menu__heading';
        heading.textContent = 'Theme';

        const content = document.createElement('div');
        content.className = 'citizen-menu__content';

        const list = document.createElement('ul');
        list.className = 'citizen-menu__content-list';

        const item = document.createElement('li');
        item.className = 'mw-list-item mw-list-item-js';

        const inner = document.createElement('div');

        function createButton(label, theme) {

            const btn = document.createElement('button');
            btn.className = 'lt-theme-button';
            btn.textContent = label;
            btn.dataset.theme = theme;

            btn.addEventListener('click', function () {
                applyTheme(theme);
            });

            return btn;
        }

        inner.appendChild(createButton('Velvet Room', 'default'));
        inner.appendChild(createButton('Mementos', 'mementos'));
        inner.appendChild(createButton('Courtroom', 'courtroom'));

        item.appendChild(inner);
        list.appendChild(item);
        content.appendChild(list);

        wrapper.appendChild(heading);
        wrapper.appendChild(content);

        container.appendChild(wrapper);

        const currentTheme = localStorage.getItem('lt-theme') || 'default';
        updateThemeSelection(currentTheme);
    }

    /* ======================
       WATCH FOR MENU LOAD
    ====================== */

    const observer = new MutationObserver(function () {
        const container = document.querySelector('.citizen-preferences-content');
        if (container) {
            injectThemeControls(container);
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

});