MediaWiki:Citizen.js

/* All JavaScript here will be loaded for users of the Citizen skin */
var page = document.querySelector("body");
// 仅修改 body class 中有 page-Main_Page 的页面

if (page.classList.contains('page-Main_Page')) {
	// 找到我们要插入新div之后的element
	var mwBody = document.getElementById('content');
	// 新建一个div
	var newDiv = document.createElement('div');
	// 给新插入的element设个class名
	newDiv.setAttribute('class', 'header-hero');
	// 加上html内容
	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>';

	// 将新 div 插入 content 之前
	mwBody.parentNode.insertBefore(newDiv, mwBody);
}

// 给页面新增个css variable，以便实现与黑暗/白色模式同步的Main_Page头图
// 把整个html都选上，因为skin让darkmode的class在这层
var html = document.querySelector("html");
	// 判断darkmode
	if (html.classList.contains('skin-citizen-dark')) {
	// 是dark，用这个
	//记得修改两个链接
		document.querySelector('#home-card-kook').style.backgroundColor= '#497A20';
		document.querySelector('#home-card-QQ').style.backgroundColor= '#1883A6';
		document.documentElement.style.setProperty('--hero-image', 'url(https://static.miraheze.org/sctoolszhwiki/2/26/Spirit_E1_flying_fast_over_Orison.jpg)');
	} else {
		// 不是dark，用这个
		document.querySelector('#home-card-kook').style.backgroundColor= '#7acc35';
		document.querySelector('#home-card-QQ').style.backgroundColor= '#24c8fd';
		document.documentElement.style.setProperty('--hero-image', 'url(https://static.miraheze.org/sctoolszhwiki/b/bd/890Jump_beach.jpg)');
}

document.addEventListener('click', function(event) {
  setTimeout(function() {
    var html = document.querySelector("html");
    if (html.classList.contains("skin-citizen-dark")) {
      document.querySelector('#home-card-kook').style.backgroundColor= '#497A20';
	    document.querySelector('#home-card-QQ').style.backgroundColor= '#1883A6';
      document.documentElement.style.setProperty('--hero-image', 'url(https://static.miraheze.org/sctoolszhwiki/2/26/Spirit_E1_flying_fast_over_Orison.jpg)');
    } else if (html.classList.contains("skin-citizen-light"))
    {
      document.querySelector('#home-card-kook').style.backgroundColor= '#7acc35';
	  document.querySelector('#home-card-QQ').style.backgroundColor= '#24c8fd';
      document.documentElement.style.setProperty('--hero-image', 'url(https://static.miraheze.org/sctoolszhwiki/b/bd/890Jump_beach.jpg)');
    }
  }, 100);
}, true);