Creating Themed Sites with CSS Variables
I’m sure you’ve come across them before. Themed sites give the user the feel of customization. Like they are in control.
We'll cover the following...
Below is the basic example we’ll build.
Don’t forget to click the buttons!
So, how easy do CSS variables make this?
We’ll have a look.
Just before that, I wanted to mention that this example is quite important. With this example, I’ll introduce the concept of updating CSS variables with Javascript.
It is fun!
You’ll love it.
What we really want to do.
The beauty of CSS variables is their reactive nature . As soon as they are updated, whatever property has the value of the CSS variable gets updated as well.
Conceptually, here’s a image that explains the process with regards to the example at hand.
Obviously we need some Javascript for the click listener.
For this simple example, the background and color of the text of the entire page are based on CSS variables. When you click any of the buttons above, they set the CSS variable to some other color. As a result of that, the background ...