Thursday, 30 August, 2018 UTC
Summary
Throughout this tutorial on CSS theming, we’ll be using CSS custom properties (also known as CSS variables) to implement dynamic themes for a simple HTML page. We’ll create dark and light example themes, then write JavaScript to switch between the two when the user clicks a button.
Just like in typical programming languages, variables are used to hold or store values. In CSS, they’re typically used to store colors, font names, font sizes, length units, etc. They can then be referenced and reused in multiple places in the stylesheet. Most developers refer to “CSS variables”, but the official name is custom properties.
CSS custom properties make it possible to modify variables that can be referenced throughout the stylesheet. Previously, this was only possible with CSS preprocessors such as Sass.
Understanding :root and var()
Before creating our dynamic theming example, let’s understand the essential basics of custom properties.
A custom property is a property whose name starts with two hyphens (--) like
--foo. They define variables that can be referenced using var(). Let’s consider this example::root {
--bg-color: #000;
--text-color: #fff;
}
Defining custom properties within the
:root selector means they are available in the global document space to all elements. :root is a CSS pseudo class which matches the root element of the document — the <html> element. It’s similar to the html selector, but with higher specificity.You can access the value of a
:root custom property anywhere in the document:div {
color: var(--text-color);
background-color: var(--bg-color);
}
You can also include a fallback value with your CSS variable. For example:
div {
color: var(--text-color, #000);
background-color: var(--bg-color, #fff);
}
If a custom property isn’t defined, their fallback value is used instead.
Defining custom properties inside a CSS selector other than the
CSS Custom Properties vs Preprocessor Variables
:root or html selector makes the variable available to matching elements and their children.CSS pre-processors such as Sass are often used to aid front-end web development. Among the other useful features of preprocessors are variables. But what’s the difference between Sass variables and CSS custom properties?
- CSS custom properties are natively parsed in modern browsers. Preprocessor variables require compilation into a standard CSS file and all variables are converted to values.
- Custom properties can be accessed and modified by JavaScript. Preprocessor variables are compiled once and only their final value is available on the client.
Let’s start by creating a folder for our project:
$ mkdir css-variables-theming
Next, add an
index.html inside the project’s folder:$ cd css-variables-theming
$ touch index.html
And add the following content:
<nav class="navbar">Title</nav>
<div class="container">
<div>
<input type="button" value="Light/Dark" id="toggle-theme" />
</div>
<h2 class="title">What is Lorem Ipsum?</h2>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
</div>
<footer>
Copyright 2018
</footer>
We are adding a navigation bar using a
<nav> tag, a footer, and a container <div> that contains a button (that will be used to switch between light and dark themes) and some dummy Lorem Ipsum text.The post Advanced CSS Theming with Custom Properties and JavaScript appeared first on SitePoint.