<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.