How to Inherit Values Using CSS Variables with a Fallback?

How to inherit values inside CSS variables

CSS variables, also known as custom properties, allow us to store and manipulate values in a way that can be reused throughout our stylesheet. However, one limitation of CSS variables is that they can't inherit values from their parent elements.

Problem

For example, consider the following code:

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

In this code, we have a :root rule that defines a --color variable with a default value of rgba(20, 20, 20, 0.5). We also have a .box class that sets some styles for a rectangular element, and a :before pseudo-element that creates a circular element inside the box.

The background property of the :before pseudo-element is set to var(--color), which means that it will inherit the value of the --color variable. However, we can override the value of the --color variable for each box by using inline styles, as shown in the following example:

<div class="box red">
<p>The first two boxes will have their --color variable set to rgba(0, 255, 0, 0.5) and rgba(0, 255, 255, 0.5) respectively, while the third box will attempt to inherit the --color variable from its parent element. However, as we mentioned earlier, CSS variables cannot inherit values, so the --color variable for the third box will remain at its default value of rgba(20, 20, 20, 0.5).</p>
<h3 id="Solution">Solution</h3>
<p>The var() function provides a way to define a fallback value for a CSS variable in case the variable is not defined or is set to its initial value. The fallback value is specified as the second argument to the var() function, as shown in the following example:</p>
<pre class="brush:php;toolbar:false">background: var(--color, inherit);

In this example, if the --color variable is not defined or is set to its initial value, the background property will inherit the color of the parent element. This is exactly the behavior that we want in this case.

Here is the updated code with the fallback value added:

:root {
  --color: rgba(25, 25, 25, 0.5); /* Defined as the default value */
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 0, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color, inherit);
  filter: invert(1);
}

Now, all three boxes will inherit the color of their parent element, even if the --color variable is set to a different value in the inline styles.