User:Canadabonk/sandbox.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.

$(function(){
	if ($('#cosmostweaks-coloreditor').length) {
		mw.util.addCSS(`
			#cosmostweaks-coloreditor {
				background-color: #eee;
				color: black;
				padding:10px;
			}
		`);
		
		const CSSvarsList = [
			'--main-background-color', 
			'--content-background-color', 
			'--text-color', 
			'--link-color', 
			'--banner-color', 
			'--banner-text-color', 
			'--header-color', 
			'--header-text-color', 
			'--button-color', 
			'--button-text-color', 
			'--footer-color'];
			
		const cosmostweaksCSS = [];
		$.each(document.styleSheets, function(index, sheet){
			const source = sheet.ownerNode.href || 'none';
			if (source.match('Canadabonk')) {
				cosmostweaksCSS.push(sheet.cssRules[0]);
				cosmostweaksCSS.push(sheet.cssRules[1]);	
			}
		});
		
		const lightmodevars = {};
		const darkmodevars = {};
		
		for (const x of CSSvarsList) {
			lightmodevars[x] = cosmostweaksCSS[0].style.getPropertyValue(x);
			darkmodevars[x] = cosmostweaksCSS[1].style.getPropertyValue(x);
		}
		
		function CSSvarsRows() {
			text = "";
			for (const x of CSSvarsList) {
				text += `<tr><th>${x}</th><td>${lightmodevars[x]}</td><td>${darkmodevars[x]}</td></tr>\n`;
			}
			return text;
		}
		
		$('#cosmostweaks-coloreditor').html(`
			<h3>Use this to visualise what a color scheme will look like!</h3>
			<p>Anything done here is not saved, this is just for preview purposes.<br>
			Paste the resulting code into your "Mediawiki:Gadget-cosmostweaks.css" to apply it.<br>
			This tool can only work with hexcodes (like "#000000"). Swap them out for RGBA values with opacity in the CSS page, if desired.</p>
			<table style="width:100%">
				<tr><td></td><th>Light mode</th><th>Dark mode</th></tr>
				${CSSvarsRows()}
			</table>
		
		`);
	}
});