How To Build A Dark Mode Switcher with CSS Variables

Back in the days when CSS didn’t have variables, I didn’t miss it. But when Sass/SCSS came with variables, this became a whole other story.

Since the days I’ve used variables in Sass, this made it clear to me that this is super useful. But I’ve waited for this feature so long to come to CSS.

Lucky us we are living in a time where all the browsers have implemented the CSS variables 🙌! In this post, I’m going to teach you CSS variables. We are combining that with TypeScript/JavaScript, to build a cool Dark mode switcher.

It is super easy, because why make it more complex than needed right! I will add all code example’s in both TypeScript and JavaScript. I choose to add TypeScript because this will become more important in the future to have in your toolbox.

1. Dive Into CSS Variables

Let’s get started with CSS variables. Open your CSS file and create them like this.

Root

If you define your CSS variable —-textcolor in :root {...} it will be available throughout your whole CSS.

But we want to use that variable to add the color to our h1. We do that by using the var() function in CSS. Everywhere you apply var(...) the color will be applied to the property you gave it to.

Class, element or ID

If you define that variable on for example on a class, element, or ID it will only be available in that scope.

So if we apply the .class-name on the div with that class, then the color will be changed.

In the example the div with the class-name will be green, the other one will be the default color black.

Overwrite CSS variable

This means that you can overwrite the color of your CSS variable based on its context.

Now we have made the default color in the root yellow, but in the class-name we have the green. This means that we can overwrite the CSS variable based on its context.

2. Change CSS Variables with JavaScript

Now that we changed the CSS variables based on its context, we need to check how we can change it with JavaScript.

Get CSS Variable Value Root

When you declare a CSS variable in the root we have to get the value via the documentElement. With the method getPropertyValue on the style object we can get access to the CSS variable.

Get CSS Variable Value Context

Declare a CSS variable in the context of a class, ID, or element. Then you get the element by using document.querySelector(). With that method getPropertyValue on the style object we can get access to the CSS variable.

Change CSS Variable in Root

Want to change the value of the CSS variable in the root, use the setProperty method.

Change CSS Variable in Context

Want to change the value of the CSS variable in a context (class, ID, or element), use the setProperty method.

Example

So to wrap it all up, I created an example to toggle CSS variables in the root or a context. You can reset the value back to normal to pass null instead of a color value.

3. Create a Dark Mode Switcher

Now we know how CSS variables behave. Both when changing the context of an element or when we change them with JavaScript. The time has come to create that dark mode switcher 🌓.

Color Schemes

Let’s define our color schemes. I have used uiGradients.com for the beautiful gradient backgrounds. The light color variables are defined in :root and the darkmode in the .darmode class.

Apply background on body

To apply the background gradient, we use the variable on the background property.

The HTML would look something like this.

Switching color schemes

To switch the dark and light mode, we are changing the class name via JavaScript on the body. In this case, it’s not needed to change the variable via JavaScript.

TypeScript

JavaScript

Here you see that I use the classList.toggle to toggle the class name between “light mode” and “dark mode”. Next, we change the text in the button based on the class of the body.

It’s that simple 🤗

Check the example to see how it works.

Conclusion

We have learned the CSS variable in combination with JavaScript and TypeScript! Now it’s time for you to use it in your projects. Let me know what you build with it!

If you liked this tutorial or have any questions about it, please let me know in the comments.

Want to get some tips about creating content for programmers, please let me know.

You Picked The Wrong Side of the JavaScript War
_And nobody is winning!_medium.com

TypeScript For Beginners
_A practical way to learn TypeScript from scratch_levelup.gitconnected.com

The Thin Line Between Flexibility, Readability, and Scalability in Software Development
_What would be your strategy?_medium.com

3 Tools to Start Programming on a Tablet or Mobile Phone
_Coding doesn’t only have to take place when you’re at your desktop or laptop_medium.com