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');
		
	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('--font-color', fontColor),
		linkcolor: new cssVar('--link-color', linkColor)
	};
	
	function variablesListCSS() {
		text = "";
		for (var x in variablesList){
			text += `${variablesList[x].name}: ${variablesList[x].val};
			`;
		}
		return text;
	}
		
	const newCSSVariables = `:root {
	${variablesListCSS()}
}`;
	
	mw.util.addCSS(newCSSVariables);
	
	$('#printCSSVars').html(`<pre>
	${newCSSVariables}
	</pre>`);
		
});