<header>
  <h1>Site Title</h1>
  <div class="subtitle">Subtitle</div>
</header>

<main>
  Choose a theme color: 
  <input type="color" id="choose-theme-color">
</main>

<footer>
  Footer
</footer>

:root {
  --mainColor: #f06d06;
}
h1 {
  background: var(--mainColor);
  margin: 0;
  padding: 1rem;
  color: white;
}
.subtitle {
  padding: 0.5rem 1rem;
  background: 
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.25),
      rgba(0, 0, 0, 0.25)
    )
    var(--mainColor);
}

main {
  padding: 1rem;
}



* {
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}
html, body {
  height: 100%;
}
main {
  flex: 1;
}
footer {
  background: var(--mainColor);
  padding: 1rem;
}

// Yank theme color from localStorage and use it.
document.documentElement.style.setProperty("--mainColor", localStorage.getItem("userThemeColor"));

var colorInput = document.querySelector("#choose-theme-color");

colorInput.addEventListener("change", function() {
  
  // Theme the site!
  document.documentElement.style.setProperty("--mainColor", this.value);
  
  // Save the value for next time page is visited.
  localStorage.setItem("userThemeColor", this.value);
  
});