MediaWiki:Citizen.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.

/* All JavaScript here will be loaded for users of the Citizen skin */

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