What are CSS variables?

CSS variables are custom properties with a specific value defined by front-end developers to reuse them around the CSS files.

How to declare variables? 🤔

First, we need a CSS file, and if you are using SASS, you can create a _root.scss file and then import them to your main.scss file. But if you use CSS, you can declare the variables at the top of the file.

:root {
 --color-primary: #9b4a89;
 --color-on-primary: #ffffff;
 --color-secondary: #049386;
 --color-on-secondary: #ffffff;
}

We declare the custom properties inside a ":root" in this example. This selector is a pseudo-class that matches the document's root element. So our styles will apply if we use the custom properties on our UI elements.

Using the custom properties 🧑🏻‍💻

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
}

For example, if we want to create a primary button, we can make the class, and instead of using hexadecimal, an RGB, or HSL color, we can use our custom variable in the property.

The advantage of this method is that we can reuse the exact property around different elements, and if we change the value, it'll change on all the elements where we use our variable.

.card.card-primary {
  background-color: var(--color-primary);
}

In this card example, we use the variable again and by doing this is easier to have a better and homologated design system. We avoid using different values or not remembering the exact value and using a similar one.

Dark mode support 🌒

There are different ways to implement a dark mode on our website; some options are using a class or an attribute in the "HTML" element, and another option is using the prefers-color-scheme CSS media. You are free to use the option that is more suitable for you, most of them using javascript.

.dark-mode {
 --color-primary: #f4a3e2;
 --color-on-primary: #000000;
 --color-secondary: #5decdf;
 --color-on-secondary: #000000;
}

Behind our ":root" selector, we can add a new CSS class, in this case, named "dark-mode," and inside that class, we'll put all the properties from the root selector, and what it will change here are the values, instead of the same light mode colors, we'll use lighter colors more suitable for a dark mode.

Using Colorffy's color scheme generator tool, I create the color scheme for this example. I use the shades for the light mode colors and the tints for the dark mode colors. You can try it if you want an easy way to create light and dark schemes.

Also, you can use the CSS variables generator to get the color variables for CSS and SCSS.

Thank you! ✅

And that's a wrap! It was easy. 🤩
I hope it will be helpful for you and if you have any questions, send me a DM on Twitter. ✌🏻