CSS variable chapter four "Theming" 💄

Happy Sunday 🏊‍♂️👙 dear folks,

Hope you are enjoying and learning something in your journey(life)

In the last DEV post, we have learned about "local variables of CSS"

CSS variable chapter three "local variable" 😮

🚩 Atul Prajapati 🇮🇳 ・ Mar 13 '21 ・ 1 min read

#css #codenewbie #tutorial #todayilearned

And in this post, we are going to learn about theming option in the CSS variable 🌼

Theming is a use case if you don't know much about theming don't sweat it and let me explain to you by these two examples.

first example: Click on the image given below and press the gear button and choose any color

After selecting the color you can see that the main color or entire website changed. It's a very small example of theming,

Second example: on this DEV community we have dark mode and white mode it's also called theming.

I hope now you can understand the theming feature and now imagine you have a grid of cards and some cards are different from others and you want to highlight them in this case also we can use theming feature.

To understand it we have to look at this codepen project 👇

Now we have this HTML code for our cards

<div class="item">
       <h1>project a</h1>
       <button>learn more</button>
</div>

to highlight our card I'm going to add one more class to our cards named "featured" like this

<div class="item featured">
        <h1>project a</h1>
        <button>learn more</button>
</div>

And now we have to override the existing color values for our item card like this

.featured
{
  --yellow: #0097e6;
  --red: #ffffff;
}

To visualize the magic see this codepen project

Ok, that's it for this DEV post and in the next DEV post, we will learn about "how to change variable values with javascript" in the CSS variable series.

If you have any questions or doubts about CSS theming you can comment below, maybe we can learn something new from your doubts.