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

<p>
  <label for="color">Click here to select a theme</label>
  <select name="color" id="color">
    <option value="#319197">#319197</option>
    <option value="rgb(125, 255, 90)">rgb(125, 255, 90)</option>
    <option value="rgb(32 89 129 / 50%)">rgb(32 89 129 / 50%)</option>
    <option value="hsl(230, 50%, 90%)">hsl(230, 50%, 90%)</option>
    <option value="hsl(22 90% 10% / 50%)">hsl(22 90% 10% / 50%)</option>
    <option value="lab(29% 39 20)">lab(29% 39 20)</option>
    <option value="lch(67% 42 258)">lch(67% 42 258)</option>
    <option value="hwb(297 1% 38%)">hwb(297 1% 38%)</option>
    <option value="red">red</option>
    <option value="blue">blue</option>
    <option value="hotpink">hotpink</option>
    <option value="green">green</option>
    <option value="linear-gradient(#00ebff, #08124a)">linear-gradient(#00ebff, #08124a)</option>
    <option value="currentColor">currentColor</option>
    <option value="transparent">transparent</option>
    <option value="var(--theme)">var(--theme)</option>
  </select>
</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;
}

:root {
  color: #319197;
  --theme: blue;
}

const themeColorMeta = document.getElementById("theme__color");
const themeColorOutput = document.getElementById("theme__color--out");
const colorSelect = document.getElementById("color");

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