Set CSS Variables using Javascript

CSS is the standard way to define the styling of your applications. It's the way to go to specify all the different colors, font styles and the layout of any web page. Unfortunately a CSS file is rather static and before you know it there is a lot of duplication. But nowadays CSS supports the use of variables to make it easier to maintain the value of let's say a specific color in just one place. And to make things even more interesting and useful, you can use Javascript to dynamically change the values. Here's how to do just that.

Using CSS Variables

A CSS variable is simply a combination of a name and a value. The name is preceded with two dashes and the value can be any valid CSS value. CSS variables can be declared throughout your CSS file, but for easier maintenance I'd recommend to specify them all in the root element of your CSS file. For example:

:root {
  --dark: #333333;
  --light: #EEEEEE;
  --tdPadding: 3px;
}

From here you can use the variables where ever you want in your CSS. So if you want to style a table, here's how:

table {
  border: 1px solid var(--light);
}
th {
  padding: var(--tdPadding);
  background-color: var(--dark);
  color: var(--light);
}
td {
  padding: var(--tdPadding);
  background-color: var(--light);
  color: var(--dark);
}

As you can see here, to change the dark color throughout your whole CSS file, you only need to change the value of the --dark variable and you are done. Of course, without CSS variables you could have used Search and Replace All. But what about the inline CSS in your HTML? CSS Variables can be used there as well which really keeps it all in one place.

You can also use variables to set the value of other variables for maximum consistency in your design:

:root {
  --compactPadding: 3px;
  --tdPadding: var(--compactPadding);
}

Set CSS Variables using Javascript

A CSS file is a static file. It is loaded by the browser and that's it. No if-then-else statements to make it conditional. But fortunately we can add or change variables using Javascript. So let's say you want to invert the colors from the previous example to create a dark mode, here's what you can do:

function switchToDarkMode() {
  document.documentElement.style.setProperty('--dark', '#EEEEEE');
  document.documentElement.style.setProperty('--light', '#333333');
}

Of course, since this is Javascript, you could also use form inputs to let the user set these values.

Let's wrap it up!

CSS variables are great to make it a lot easier to maintain your CSS files. And using Javascript you can even change the CSS values on the fly. As an example of what you can do with these techniques I created a demo page which is also a nice tip for you if you are designing the color scheme for your application. You can find the Color Design Demo on our website. Click Ctr+U on the demo page to see the HTML source code.

That's it for this post. Feel free to leave a comment or send a question to andre@silveressence.net. Let me know if you got inspired and may the source be with you!