<pre>
:root {
  --pagebackground: <span>powderblue</span>;
}
body {
  background: var(--pagebackground);
}
</pre>
<ul>
<li>
Set the property to 'firebrick': <button
onclick="setBG('firebrick')">document.documentElement.style.setProperty('--pagebackground', 'firebrick');</button>
</li>
<li>Set the property to 'powderblue': <button
onclick="setBG('powderblue')">document.documentElement.style.setProperty('--pagebackground', 'powderblue');</button>
</li>
<li>
Set the property to 'rgb(20,45,200)': <button
onclick="setBG('rgb(20,45,200)')">document.documentElement.style.setProperty('--pagebackground', 'rgb(20,45,200)');</button>
</li><li>Read property: 
<button onclick="getCSSprop('--pagebackground')">getComputedStyle(document.documentElement).
getPropertyValue('--pagebackground');</button><span></span>
</li></ul>

:root {
  --pagebackground: powderblue;
}
body {
  background: var(--pagebackground);
  font-family: arial, helvetica, sans-serif;
}
pre {
  color: #fff;
  background: #111;
  padding: 5px;
  line-height: 1.3;
}
button {
  margin: 0 .5em;
  display: inline-block;
}



function setBG(col) {
 let ex = document.querySelector('span');
 let root = document.documentElement;
 root.style.setProperty('--pagebackground', col); 
 ex.innerText = col;
}
function getCSSprop(prop) {
 let ex = document.querySelector('span:nth-child(2)');
 ex.innerText = getComputedStyle(document.documentElement).
  getPropertyValue(prop);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.