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.

$(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 + ";\n";
		}
		return text;
	}
		
	const newCSSVariables = 
`:root {
${variablesListCSS()}
}`;
	
	mw.util.addCSS(newCSSVariables);
	
	$('#printCSSVars').append(
`<syntaxhighlight lang="css">
${newCSSVariables}
</syntaxhighlight>`);

	$('#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;
	}
});