User:Canadabonk/sandbox.js

$(document).ready(function(){
	const
		mainBackgroundColor = $('body').css('background-color'),
		contentBackgroundColor = $('#mw-content').css('background-color'),
		
		fontColor = $('#mw-content').css('color'),
		linkColor = $('#content a:not(.new').css('color'),
		
		bannerColor = $('#cosmos-banner').css('background-color'),
		headerColor = $('.cosmos-header').css('background-color'),
		
		buttonColor = $('.cosmos-button-primary').css('background-color'),
		buttonTextColor = $('.cosmos-button-primary').css('color'),
		
		footerColor = $('#cosmos-footer').css('background-color');
		
	function cssVar(name, val, desc) {
		this.name = name;
		this.val = val;
		this.desc = desc ? desc : "none";
	}
	
	const variablesList = {
		mainbgcolor: new cssVar('--main-background-color', mainBackgroundColor),
		contentbgcolor: new cssVar('--content-background-color', contentBackgroundColor),
		fontcolor: new cssVar('--text-color', fontColor),
		linkcolor: new cssVar('--link-color', linkColor),
		bannercolor: new cssVar('--banner-color', bannerColor),
		headercolor: new cssVar('--header-color', headerColor),
		buttoncolor: new cssVar('--button-color', buttonColor),
		buttontext: new cssVar('--button-text-color', buttonTextColor),
		footercolor: new cssVar('--footer-color', footerColor),
	};
	
	function variablesListCSS() {
		text = "";
		for (var x in variablesList){
			text += "	" + variablesList[x].name + ": " + variablesList[x].val + ";\n";
		}
		return text;
	}
		
	const newCSSVariables = 
`:root {
${variablesListCSS()}
}`;
	
	mw.util.addCSS(newCSSVariables);
	
	$('#printCSSVars').append(
`<pre>
${newCSSVariables}
</pre>`);

	$('#printCSSVarsTable').append(printCSSVarsTable());
		
	function printCSSVarsTable() {
		table = '<table class="wikitable"><tr><th>CSS variable</th><th>Value</th><th>Description</th></tr>';
		for (var x in variablesList){
			table += `<tr><td>${variablesList[x].name}</td><td><div style="display:inline-block;margin-right:0.5em;width:1em;height:1em;border:1px solid black;background-color:${variablesList[x].val};"></div>${variablesList[x].val}</td><td>${variablesList[x].desc}</td>`;
		}
		table += '</table>';
		return table;
	}
});