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};
`;
		}
		return text;
	}
		
	const newCSSVariables = 
`:root {
	${variablesListCSS()}
}`;
	
	mw.util.addCSS(newCSSVariables);
	
	$('#printCSSVars').html(`<pre>
	${newCSSVariables}
	</pre>`);
		
});