MediaWiki:Gadget-darkmode.js

(function($, mw) {
    var DARK_COOKIE = 'darkmode',
        THEME_COOKIE = 'theme',
        isUsingDarkmode = $.cookie(THEME_COOKIE) === 'dark' || ($.cookie(THEME_COOKIE) == null && $.cookie(DARK_COOKIE) === 'true'),
        isMobile = mw.config.get('wgMFMode') !== null,
        portletLink;

    var self = {
        init: function() {
            // Apply the current theme on page load
            self.applyTheme(isUsingDarkmode);

            // Create the dark mode toggle link
            portletLink = mw.util.addPortletLink(
                (isMobile ? 'p-navigation' : 'p-personal'),
                '#', // Use '#' to prevent redirection
                (isMobile ? 'Toggle dark mode' : '🌓 '),
                'pt-dm-toggle',
                'Toggle dark mode',
                null,
                $('#pt-userpage, #pt-anonuserpage, #pt-createaccount')[0]
            );

            // Toggle theme on link click
            $(portletLink).click(function(e) {
                e.preventDefault();
                isUsingDarkmode = !isUsingDarkmode;
                $.cookie(THEME_COOKIE, isUsingDarkmode ? 'dark' : 'light', { expires: 365, path: '/' });
                $.cookie(DARK_COOKIE, isUsingDarkmode, { expires: 365, path: '/' });
                self.applyTheme(isUsingDarkmode);
            });
        },

        applyTheme: function(isDark) {
            if (isDark) {
                $('body').addClass('wgl-theme-dark wgl-darkmode')
                         .removeClass('wgl-theme-light wgl-lightmode');
                mw.hook('wgl.themeChanged').fire('dark');
            } else {
                $('body').addClass('wgl-theme-light wgl-lightmode')
                         .removeClass('wgl-theme-dark wgl-darkmode');
                mw.hook('wgl.themeChanged').fire('light');
            }
        }
    };

    // Ensure jQuery is loaded before initializing
    if (typeof $ !== 'undefined') {
        $(self.init);
    } else {
        mw.loader.using(['jquery'], function() {
            $(self.init);
        });
    }
})(jQuery, mediaWiki);