<div class="content">

  <div class="controls">
       <button class="reload" onclick="location.href=location.href">Reload to original values</button>
  <label class="box-color-picker"><input id="rootTitleColor" class="color-picker" type="color" data-target-id="root" data-css-var="--title-color" onChange="changeElementVar(this)">Choose root color for --title-color var</label>
    <label class="box-color-picker"><input id="rootSubTitleColor" class="color-picker" type="color" data-target-id="root" data-css-var="--subtitle-color" onChange="changeElementVar(this)">Choose root color for --subtitle-color var</label>
   
    
    <div id="title-box" class="title-box">
      <label class="box-color-picker"><input id="titleBoxColor" class="color-picker" type="color" data-target-id="title-box" data-css-var="--title-color" onChange="changeElementVar(this)">Choose title color at box level</label>
      <h1 id="title">
        This is the title
      </h1>
      <input id="titleColor" class="color-picker" type="color" data-css-var="--title-color" data-target-id="title" onChange="changeElementVar(this)">Choose title color</input>
      <p>This control changes the value of the :root variable</p>
    </div>
    <div id="subtitle-box" class="subtitle-box">
      <label class="box-color-picker"><input id="subtitleBoxColor" class="color-picker" type="color" data-target-id="subtitle-box" data-css-var="--subtitle-color" onChange="changeElementVar(this)">Choose subtitle color at box level</label>
      <h2 id="subtitle">
        This is the subtitle
      </h2>
      <input id="subtitleColor" class="color-picker" type="color" data-target-id="subtitle" data-css-var="--subtitle-color" onChange="changeElementVar(this)">Choose subtitle color</input>
      <p>This control changes the value of the variable for only this element</p>
    </div>
  </div>
  <div class="vars-box">
    <h2>css vars status</h2>
    <div id="varsdisplay"></div>
  </div>
</div>
:root {
  --title-color: #0caa06;
  --subtitle-color: #73aacc;
}
body {
  font-family: "Lato", sans-serif;
}
.content {
  display: flex;
  justify-content: center;
}
button.reload{     
    height: 2rem;
    margin: 5px 0;
}
.controls {
  width: 40%;
  padding: 1rem;
}
.controls div{
  padding: 1rem;
  margin: 1rem;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.5), -1px -1px 1px rgba(0,0,0,0.5);
}
.vars-box {
  font-size: .6rem;
}
.box-color-picker{
  display: block;
}
.title-box .box-color-picker, 
.subtitle-box .box-color-picker{
  float: right;
}
#title,
#subtitle {
  font-family: "Luckiest Guy", cursive;
}

#title {
  color: var(--title-color);
  
}
#subtitle {
  color: var(--subtitle-color);
}
(function rootInitValues() {
  const rootStyles = window.getComputedStyle(document.body);
  let titleColor = rootStyles
    .getPropertyValue("--title-color")
    .trim();
  let subtitleColor = rootStyles
    .getPropertyValue("--subtitle-color")
    .trim();
  console.log("Root var values:", {titleColor, subtitleColor});

  const titleColorPicker = document.getElementById("rootTitleColor");
  titleColorPicker.value = titleColor;
  const subtitleColorPicker = document.getElementById("rootSubTitleColor");
  subtitleColorPicker.value = subtitleColor;
  updateVarsDisplay();
})();

function changeRootVar(t) {
  document
    .documentElement
    .style
    .setProperty(t.dataset.cssVar, t.value);
  updateVarsDisplay();
}

function changeElementVar(t) {
  if (t.dataset.targetId=='root') return changeRootVar(t);
  
  document
    .getElementById(t.dataset.targetId)
    .style
    .setProperty(t.dataset.cssVar, t.value);
  updateVarsDisplay();
}

function updateVarsDisplay() {
    const varsDisplay = document.getElementById("varsdisplay");
    const rootVars = {
        title: window
        .getComputedStyle(document.body)
        .getPropertyValue("--title-color"),
        subtitle: window
        .getComputedStyle(document.body)
        .getPropertyValue("--subtitle-color")
    };
    const subtitleBoxVars = {
        title: document
            .getElementById("subtitle-box")
            .style
            .getPropertyValue("--title-color"),
        subtitle: document
            .getElementById("subtitle-box")
            .style
            .getPropertyValue("--subtitle-color")
    };
    const titleBoxVars = {
        title: document
        .getElementById("title-box")
        .style
        .getPropertyValue("--title-color"),
        subtitle: document
        .getElementById("title-box")
        .style
        .getPropertyValue("--subtitle-color")
    };
    const titleVars = {
        title: document
        .getElementById("title")
        .style
        .getPropertyValue("--title-color"),
        subtitle: document
        .getElementById("title")
        .style
        .getPropertyValue("--subtitle-color")
    };
    const subtitleVars = {
        title: document
        .getElementById("subtitle")
        .style
        .getPropertyValue("--title-color"),
        subtitle: document
        .getElementById("subtitle")
        .style
        .getPropertyValue("--subtitle-color")
    };
    varsDisplay.innerHTML = `
        <div>
        <h3>:root</h3>
        <ul>
        <li style="color: ${rootVars.title}">
            Title var color ${rootVars.title}
        </li>
        <li style="color: ${rootVars.subtitle}">
            Subtitle var color ${rootVars.subtitle}
        </li>  
        </ul>
        <h3>This is the title-box</h3>
        <ul>
        <li style="color: ${titleBoxVars.title}">
            Title var color ${titleBoxVars.title}
        </li>
        <li style="color: ${titleBoxVars.subtitle}">
            Subtitle var color ${titleBoxVars.subtitle}
        </li>  
        </ul>
        <h3>This is the title</h3>
        <ul>
        <li style="color: ${titleVars.title}">
            Title var color ${titleVars.title}
        </li>
        <li style="color: ${titleVars.subtitle}">
            Subtitle var color ${titleVars.subtitle}
        </li>  
        </ul>
        <h3>This is the subtitle-box</h3>
        <ul>
        <li style="color: ${subtitleBoxVars.title}">
            Title var color ${subtitleBoxVars.title}
        </li>
        <li style="color: ${subtitleBoxVars.subtitle}">
            Subtitle var color ${subtitleBoxVars.subtitle}
        </li>  
        </ul>
        <h3>This is the subtitle</h3>
        <ul>
        <li style="color: ${subtitleVars.title}">
            Title var color ${subtitleVars.title}
        </li>
        <li style="color: ${subtitleVars.subtitle}">
            Subtitle var color ${subtitleVars.subtitle}
        </li>  
        </ul>
    `;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Lato|Luckiest+Guy

External JavaScript

This Pen doesn't use any external JavaScript resources.