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.

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

    function injectThemeOption(container) {
    	
    	function createRadio(id, label) {
		    const radioWrapper = document.createElement('div');
		    radioWrapper.className = 'citizen-client-prefs-radio';
		
		    const input = document.createElement('input');
		    input.type = 'radio';
		    input.name = 'lt-theme-group';
		    input.id = id;
		    input.className = 'citizen-client-prefs-radio__input';
		
		    const icon = document.createElement('span');
		    icon.className = 'citizen-client-prefs-radio__icon';
		
		    const labelEl = document.createElement('label');
		    labelEl.className = 'citizen-client-prefs-radio__label';
		    labelEl.htmlFor = id;
		    labelEl.textContent = label;
		
		    radioWrapper.appendChild(input);
		    radioWrapper.appendChild(icon);
		    radioWrapper.appendChild(labelEl);
		
		    return radioWrapper;
		}

        if (document.getElementById('lt-theme-test')) return;

        // Portlet wrapper
        const wrapper = document.createElement('div');
        wrapper.id = 'lt-theme-test';
        wrapper.className = 'mw-portlet citizen-menu';

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

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

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

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

        // Inner div (matches Citizen structure)
        const innerDiv = document.createElement('div');

        // FORM (this is important for spacing)
        const form = document.createElement('form');

        form.appendChild(createRadio('lt-theme-default', '🎭 Velvet'));
		form.appendChild(createRadio('lt-theme-red', '🚇 Meta'));
		form.appendChild(createRadio('lt-theme-blue', '⚖️ Justice'));
		
		// === Persistence Logic ===

		// Check if theme exists
		let savedTheme = localStorage.getItem('lt-theme');
		
		if (!savedTheme) {
		    // First-time visitor → set default explicitly
		    savedTheme = 'lt-theme-default';
		    localStorage.setItem('lt-theme', savedTheme);
		}
		
		// Select the saved radio
		const savedInput = form.querySelector('#' + savedTheme);
		if (savedInput) {
		    savedInput.checked = true;
		}
		
		// Listen for changes
		form.addEventListener('change', function (e) {
		    if (e.target && e.target.matches('.citizen-client-prefs-radio__input')) {
		        localStorage.setItem('lt-theme', e.target.id);
		    }
		});

        // Assemble hierarchy
        innerDiv.appendChild(form);
        item.appendChild(innerDiv);
        list.appendChild(item);
        content.appendChild(list);
        wrapper.appendChild(heading);
        wrapper.appendChild(content);

        container.appendChild(wrapper);
    }

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

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

});