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

(function() {
    'use strict';
    if (typeof mw !== 'undefined' && mw.loader) {
        mw.loader.using('mediawiki.page.ready', function() {
            initDarkMode();
        });
    } else {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                setTimeout(initDarkMode, 100);
            });
        } else {
            setTimeout(initDarkMode, 100);
        }
    }
    function initDarkMode() {
        const isDarkMode = localStorage.getItem('darkMode') === 'true';
        if (isDarkMode) {
            document.documentElement.classList.add('dark-mode');
        }
        const moreTools = document.querySelector('.navbar-more-tools');
        if (!moreTools) {
            setTimeout(initDarkMode, 200);
            return;
        }
        if (document.querySelector('.dark-mode-toggle')) {
            return;
        }
        const darkModeToggle = document.createElement('a');
        darkModeToggle.href = '#';
        darkModeToggle.className = 'navbar-tool-link dark-mode-toggle';
        darkModeToggle.title = isDarkMode ? 'Switch to light mode' : 'Switch to dark mode';
        darkModeToggle.setAttribute('aria-label', darkModeToggle.title);
        darkModeToggle.innerHTML = '<i class="fas fa-lightbulb"></i>';
        darkModeToggle.addEventListener('click', function(e) {
            e.preventDefault();
            toggleDarkMode();
        });
        const parent = moreTools.closest('.navbar-tool');
        if (parent && parent.parentNode) {
            const wrapper = document.createElement('div');
            wrapper.className = 'navbar-tool';
            wrapper.appendChild(darkModeToggle);
            parent.parentNode.insertBefore(wrapper, parent.nextSibling);
        }
        updateToggleIcon(isDarkMode);
    }
    function toggleDarkMode() {
        const isDarkMode = document.documentElement.classList.toggle('dark-mode');
        localStorage.setItem('darkMode', isDarkMode);
        const toggle = document.querySelector('.dark-mode-toggle');
        if (toggle) {
            toggle.title = isDarkMode ? 'Switch to light mode' : 'Switch to dark mode';
            toggle.setAttribute('aria-label', toggle.title);
            updateToggleIcon(isDarkMode);
        }
    }
    function updateToggleIcon(isDarkMode) {
        const toggle = document.querySelector('.dark-mode-toggle i');
        if (toggle) {
            toggle.className = isDarkMode ? 'fas fa-lightbulb' : 'far fa-lightbulb';
        }
    }
})();