<h1>
  theme-color: <span id="theme__color--out">#319197</span>
</h1>

<p>
  <label for="color">Click here to select a theme</label>
  <input type="color" value="#319197" id="color" />
</p>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Exo", Arial, sans-serif;
}
const themeColorMeta = document.getElementById("theme__color");
const themeColorOutput = document.getElementById("theme__color--out");
const colorInput = document.getElementById("color");

colorInput.addEventListener("change", (etv) => {
  themeColorMeta.setAttribute("content", etv.target.value);
  themeColorOutput.textContent = etv.target.value;
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.