How To Declare Variables in CSS

Laptop with code displaying

What are CSS Variables?

CSS Variables are powerful tools that have been with us for a long time. In this blog we are going to see how we can easily add a Dark Mode to our app, so we can change it dynamically or manually.

First of all, for all those who don’t know about CSS Variables, this a feature that helps you to declare variables in CSS. 

Variables in CSS?! Yeah, let me explain that. Imagine that you have a color that you are going to use in a lot of places and will be reusing frequently. You can define a variable with that color as the value, then use it on all those places. This can also be helpful in case you want to reskin your app by just updating the variable color. That sounds pretty cool, eh?

Adding a Light Mode CSS Variable

Now, let’s get our hands on the code. We need to declare our Light and Dark theme on the root CSS file, so we can use each one when required. Let’s see an example of Light theme:

CSS Example 1

Once we are done with our Light theme, we might need to know some things before we go to define our Dark Mode. In CSS we can use the media decorator to know if our user has requested the system to use Dark color theme simply as adding this:

CSS Example 2

Furthermore, the styles added inside that media decorator will be applied whenever the user has requested the system to use a Dark color theme. What if we want to know when the user selects the Light color theme? Well, we can use it in the reverse flow simply by changing the parameter set on the media decorator:

CSS Example 3

Join the Dark Mode

Now that we know the decorator, we can use it to define our Dark theme easily. This will be achieved simply by adding the same variables from the Light theme and updating the values:

Once we add this in our CSS file, we are going to be able to swap between those two themes by changing the system mode between Light and Dark – easy, right? CSS Variables are pure magic!

Changing CSS Variables

Moreover, what if we want to allow the user to change it directly from the app – manually – instead of changing the system mode? CSS Variables have got our back again! Let’s see what we need for this case. To begin, let’s use the same theme:

We need to change the value of those CSS Variables dynamically from the app, so the user can swap to Dark Mode without changing the system mode. How are we going to achieve this though? We’ve mentioned just how powerful CSS Variables are, so just trust them and update them on run time!

CSS Example 6

Yes, it’s that easy! That line of code can update the variables in run time to new colors. Thanks to this, we can even have a place with different themes and variables the we can change easily. Re-skinning an app on run time was never this easy!

For more CSS tricks and tips, follow OpenForge on Instagram, Twitter, and Youtube. 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>