CSS Variables - Setting values with JS

by PrismDan

HTML

<label>
  <span>Pick a new colour</span>
  <input id="color" type="color" value="#023e50" />
</label>

CSS

:root {
  --color: #023e50;
}

body {
  background-color: var(--color);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  font-family: monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  transition: background-color 150ms ease-out;
}

label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

span {
  display: block;
  margin-bottom: 1em;
  background-color: rgba(0, 0, 0, .25);
  color: #fff;
  padding: .5em 1em .6em;
}

JavaScript

document.getElementById('color').addEventListener('change', (e) => {
  document.documentElement.style.setProperty('--color', e.target.value);
});