CSS: use currentColor to write less code

When you start as a beginning front-end developer and are so green behind your ears (a Flemish proverb that sounds weird in English), you’ll look for ways to improve your code.

Read a bunch of articles on how to improve and write more readable code, and in the beginning, you may write something like this.

So what exactly is the problem with my code sample? Well, a lot of this code is redundant and it is repeating specific CSS-properties like text, border, background-color that are all related to colors.

Luckily CSS has a useful CSS-property currentColor, that acts like a variable that stores your HEX-color of the first parent element that has the property color.

The functionality can be compared to that of CSS-properties.

Why use currentColor?

The property CSS currentColor is a useful property you can use to repeat a specific color on the current and child elements. Now in the example, I rewrote large portions of the code, resulting in less repeated code.

What you will mainly notice is that I made a general CSS-class called button-outline. This CSS-class stores every important styling to create a button, instead of repeating the same twice or more.

Refactoring

What you will mainly notice is the use of the property and a general CSS class called button-outline which contains the most important properties of a button. Instead of repeating them in each separate CSS-class.

.button-outline {
border: solid 4px currentColor;
}

This way, all elements will automatically take over the color of button-outline or when you apply a different CSS class such as button-outline — red or button-outline — green.

.button-outline--red {
color: #FF0000;
}

You know this can be very useful to change the color of SVG-icons. By applying currentColor you can inherit the value as the background color to fill up SVG icons of CSS shapes.

Here are more tricks

You can also apply this specific technique to children elements that inherit the text-color.

hr {
border-top-width: 3px;
border-top-color: currentColor;
/* Make the HR element lighter than the dark text-color */
filter: brightness(125%);
}

Here I applied the color that got inherited from the body HTML-element and by using a filter, I can make the HR-element darker or lighter. Resulting in a bit more contrast between the HR-element and the text you are reading.

This technique works perfectly with icons or shapes together with your text. In my pen, I defined a light gray text color for my text, then my first shape becomes dark gray. Then you have my second group with a blue color. That second shape also becomes blue, but dark blue.

Light and Dark mode

You can now apply that text color of the figure HTML-element on the border-color depending on the preferred color-scheme. A lot depends on your browser or operating system (OS11 or Windows).

Here we set the default text color to black, and in dark mode, we reverse the colors.

:root {
--text-color: black;
--background-color: white;
}
@media (prefers-color-scheme: dark) {
body {
--text-color: white;
--background-color: black;
}
}

When you use dark-mode the background will be black and the text-color white. But the border-color of the figure element will become white.

I hope these tips will help you understand this property better.

Senior back-end developer in Ghent who likes writing sometimes weird / creative solutions to a specific problem.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store