DEV Community

Cover image for CSS variable chapter four "Theming" ๐Ÿ’„

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"

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

Alt Text

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.

righttt

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

.featured
{
  --yellow: #0097e6;
  --red: #ffffff;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)