CSS Custom Properties and JavaScript

This page demonstrates how to manipulate CSS custom property values using JavaScript.

Try moving the mouse around.

CSS rules

:root {
    --foreground-color: hsl(100,50%,50%);
    --background-color: hsl(300,50%,50%);
}
html {
    color: var(--foreground-color);
    background-color: var(--background-color);
}

JavaScript:

let root = document.documentElement;
root.addEventListener("mousemove", event => {
    let foregroundHue = event.clientX % 400;
    let lightness = (event.clientY/4) % 100;    
    let backgroundHue = ((event.clientX/4) + 200) % 400;
    root.style.setProperty('--foreground-color', `hsl(${foregroundHue}, 100%, ${lightness}%`);        
    root.style.setProperty('--background-color', `hsl(${backgroundHue}, 100%, ${lightness/2}%`);
});