For this exercise there’s a couple of range inputs and a color input. You wire up a
change and a
mousemove event listener so that whenever the sliders or the color input change, you can grab those values and then you can update the CSS variables within the document.
It turns out that not only can you do this and it’s pretty cool, you can even adjust variables at different levels in the DOM. Setting the variables at the full document level works, but you can also set them at lower levels to different values and they will take effect for the parts of the DOM where that setting is more specific. I don’t think I’m making this very clear, but it’s pretty cool.
In the example, there’s an h1 header containing a span using a variable for color and in another area there’s an image using that same variable. If you set the variable at the document level, both the h1 span and the image border will be set to that color. However, if you also set the same variable but at the h1 level, the span will use that color as it is more specific than the document level variable, similar to the CSS cascade.
On to Day 4!