MediaWiki:Citizen.js

/* All JavaScript here will be loaded for users of the Citizen skin */
//Get player counts of Minecraft server
$.getJSON('https://mcapi.us/server/status?ip=play.prismparty.net', function(json) {
   if (json.status !== "error") {
     $("#online").html('<i class="fas fa-users"></i> ' + json.players.now);
   } else {
     $("#online").html('<i class="fas fa-spinner fa-spin"></i>');
   }
     setTimeout(5000);
});

// Discord Button
$(document).ready( function () {
   $('.citizen-drawer').after($('<div class="citizen-discord citizen-header__item mw-checkbox-hack-container"><a href="https://discord.gg/gwuGnK3"><div class="citizen-discord__button citizen-header__button"><label id="citizen-discord__buttonCheckbox" class="mw-checkbox-hack-button citizen-header__buttonCheckbox" for="citizen-discord__checkbox" title="Join us on Discord!" aria-hidden="true"><span>Join us on Discord!</span></label><span class="citizen-ui-icon mw-ui-icon-discord"></div></a></div>'));
});


// Page Header IMG 
var page = document.querySelector("body");
if (page.classList.contains('page-Main_Page')) {
	var mwBody = document.getElementById('content');
	var newDiv = document.createElement('div');
	newDiv.setAttribute('class', 'header-hero');
	newDiv.innerHTML = '<div class="header-hero-image" style="background-image: linear-gradient(to top, var(--color-surface-0), transparent 150%), var(--hero-image);background-size: cover;background-position: 0 0, center;height: 36vh;margin-bottom: -31vh;"></div>';
	mwBody.parentNode.insertBefore(newDiv, mwBody);
}

var html = document.querySelector("html");
	if (html.classList.contains('skin-citizen-dark')) {
		document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/creative_dark.webp)');
	} else {
		document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/creative_light.webp)');
}

document.addEventListener('click', function(event) {
  setTimeout(function() {
    var html = document.querySelector("html");
    if (html.classList.contains("skin-citizen-dark")) {
      document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/creative_dark.webp)');
    } else if (html.classList.contains("skin-citizen-light"))
    {
      document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/creative_light.webp)');
    }
  }, 100);
}, true);