<p>Change the hue!</p>
<input type='range' min='0' max='1000'>
html {
--hue: 150; /* change me! */
}
body {
background-color: hsl(var(--hue), 100%, 50%);
}
body {
padding: 30px;
}
var html = document.querySelector('html');
var colorPicker = document.querySelector('input');
function updateHue(input) {
console.clear();
console.log(input);
html.style.setProperty('--hue', this.value);
// 'this' refers to the input in this case
}
colorPicker.addEventListener('input', updateHue);
/* just to show some color contrast */
var dark = document.createElement('div');
dark.classList.add('circle');
dark.style.width = '100px';
dark.style.height = '100px';
dark.style.backgroundColor = 'rgba(0,0,0,.3)';
dark.style.borderRadius = "50%";
dark.style.position = "fixed";
dark.style.bottom = "100px";
dark.style.pointerEvents = 'none';
dark.style.right = "40px";
document.body.appendChild(dark);
var light = document.createElement('div');
light.classList.add('circle');
light.style.width = '200px';
light.style.height = '200px';
light.style.backgroundColor = 'rgba(255,255,255,.5)';
light.style.borderRadius = "50%";
light.style.position = "fixed";
light.style.bottom = "-20px";
light.style.right = "100px";
light.style.pointerEvents = 'none';
document.body.appendChild(light);
// 100% serious ^ this is the most document.createElement type code I've written in my entire career... in one sitting... - @sheriffderek
// this is not likely to be how you create DOM
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.