User:Crashaholic/citizen.js

var r = document.querySelector(':root');

// Create a function for getting a variable value
function get_var(name) 
{
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  rs.getPropertyValue(name);
}

// Create a function for setting a variable value
function set_var(name, value) 
{
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty(name, value);
}

if ($(".skin-citizen-light"))
{
	set_var("--color-primary__h", "39");
	set_var("--color-primary__s", "63%");
	set_var("--color-primary__l", "59%");
	set_var("--color-surface-0", "rgb(240, 234, 214)");
	set_var("--color-surface-1", "rgb(243, 235, 205)");
	set_var("--color-surface-2", "rgb(240, 226, 179)");
	set_var("--color-surface-3", "rgb(231, 210, 147)");
	set_var("--color-surface-4", "rgb(226, 201, 132)");
	set_var("--color-base", "hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 0.3))");
	set_var("--color-base--emphasized", "hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 0.2))");
	set_var("--color-base--subtle", "hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 0.5))");
}