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) {

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

        const wrapper = document.createElement('div');
        wrapper.id = 'lt-theme-test';
        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';
        
        // Create button group (this matches Text / Width / Performance)
		const buttonGroup = document.createElement('div');
		buttonGroup.className = 'citizen-client-prefs-button-group';
		
		// Create single button inside group
		const button = document.createElement('button');
		button.type = 'button';
		button.className = 'citizen-client-prefs-button';
		button.textContent = 'Velvet Room';
		
		// Add button to group
		buttonGroup.appendChild(button);
		
		// Add group to list item
		item.appendChild(buttonGroup);
		
        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 });

});