MediaWiki:Gadget-darkmode.js

(function() {
  var isDark = !document.cookie.includes('theme=light');
  if (isDark) {
    document.documentElement.classList.add('wgl-theme-dark', 'wgl-darkmode');
  } else {
    document.documentElement.classList.add('wgl-theme-light', 'wgl-lightmode');
  }
})();

(function($, mw) {
  var DARK_COOKIE = 'darkmode',
      THEME_COOKIE = 'theme',
      isUsingDarkmode = $.cookie(THEME_COOKIE) !== 'light',
      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
        self.getToggleIcon(isUsingDarkmode), // Set initial icon based on current state
        'pt-dm-toggle',
        'Toggle dark mode',
        null,
        $('#pt-userpage, #pt-anonuserpage, #pt-createaccount')[0]
      );

      // Add pointer cursor style
      $(portletLink).css('cursor', 'pointer');

      // 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);

        // Update link text with appropriate icon
        $(portletLink).html(self.getToggleIcon(isUsingDarkmode));
      });
    },

    // Helper function to get the appropriate icon based on current theme
    getToggleIcon: function(isDark) {
      if (isMobile) {
        return 'Toggle dark mode';
      } else {
        return isDark ? '🌙 ' : '☀️ ';
      }
    },

    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');
      }
      // Make the body visible after applying the theme
      $('body').css({visibility: 'visible', opacity: 1});
    }
  };

  // Ensure mediawiki.util is loaded before init
  mw.loader.using(['mediawiki.util'], function () {
    $(self.init);
  });

})(jQuery, mediaWiki);