[TIL] How to Use CSS Custom Properties (or CSS Variables)

I have been working on an interactive fiction web app to explore storytelling with my son. I am always learning when building web apps… And, if I am not careful, I will stick to my old ways. In this latest work, I wanted to dark theme the Infinite IF app, which required many adjustments to my CSS stylesheets. There has to be a better way! I decided to stop and research what I was doing. I discovered CSS Custom Properties (also known as CSS variables)! I should have known about these from my work before, but I have been using Bootstrap or other frameworks that take care of many things behind the scenes. With my latest app work, I have been focused on using pure JavaScript and CSS.

Dark Theme with CSS Variables for Infinite IF | Interactive Fiction App

How to Use CSS Custom Properties

Using CSS variables starts with defining them. This is usually done within the :root pseudo-class, meaning the variables are available globally across your HTML document.

:root {
    --primary-color: #4CAF50;
    --secondary-color: #ff6347;
}

Here, --primary-color and --secondary-color are custom properties holding color values that you can use throughout your CSS. Once defined, you can use these variables anywhere in your stylesheets by referencing them with the var() function.

body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

If you are not catching it… Your style code only needs to reference the color variables, and you only have to change the color values in one place!

What are all of the CSS Variables? What are the limitations?

CSS variables can hold almost any value you typically write directly into your CSS rules. This flexibility allows for powerful theming and reusability across your stylesheets. The primary limitation is that CSS variables cannot store CSS selectors or entire CSS rules; they are meant for values only.

Color Values

Hexadecimal (e.g., #ff6347)
RGB (e.g., rgb(255, 99, 71))
RGBA (e.g., rgba(255, 99, 71, 0.5))
HSL (e.g., hsl(9, 100%, 64%))
HSLA (e.g., hsla(9, 100%, 64%, 0.5))
Named colors (e.g., red, blue)

Dimension Values

Length (e.g., 10px, 2em, 5vh)
Percentage (e.g., 50%)
Viewport-based lengths (e.g., vh, vw, vmin, vmax)

Font and Text Values

Font sizes (e.g., 16px, 1.5rem)
Font families (e.g., "Times New Roman", Arial)
Text shadows (e.g., 1px 1px 2px black)
Font weights (e.g., bold, 700)

Timing Values

Duration (e.g., 0.3s, 200ms)
Timing functions (e.g., ease-in, linear)

URLs and Image Values

Image URLs (e.g., url('path/to/image.jpg'))
Gradients (e.g., linear-gradient(to right, red, blue))

Miscellaneous and Custom Values

Border details (e.g., 1px solid black)
Box shadows (e.g., 10px 10px 5px grey)
Transformations (e.g., rotate(45deg), scale(1.2))
Transitions (e.g., all 0.3s ease)
Grid template areas (e.g., 'header header header')
Arbitrary numbers (e.g., 300, 0.5), often used in calculations or for defining custom scales
Custom values of any combination of strings or values (e.g., --custom-shadow: 2px 2px 5px rgba(0,0,0,0.5);)

When to Use CSS Custom Properties

Theming: CSS variables make theming a website incredibly straightforward. You can change your site’s theme by altering the values of your variables.

:root {
    --primary-color: #333;
    --background-color: #fff;
}

[data-theme="dark"] {
    --primary-color: #ccc;
    --background-color: #222;
}

body {
    background-color: var(--background-color);
    color: var(--primary-color);
}

Responsive Design: You can use CSS variables to streamline responsive designs. For example, you can define font sizes that change with the viewport size.

:root {
    --base-font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --base-font-size: 14px;
    }
}

body {
    font-size: var(--base-font-size);
}