CSS defines currentColor as a color equivalent to an element’s color property. It’s similar to a CSS variable, but on a per-element basis. When currentColor is used as a color value in any CSS property, it computes to whatever is the color value for the element to which it is applied.
So, my question is not whether something currentBackgroundColor exists—I have combed through the CSS Color specification and am fairly confident it does not—but whether it could exist.
Borrowing from the currentColor definition, I presume currentBackgroundColor would be defined as something like:
The value of the ‘background-color’ property. The computed value of the ‘currentBackgroundColor’ keyword is the computed value of the ‘background-color’ property. If the ‘currentBackgroundColor’ keyword is set on the ‘background-color’ property itself, it is treated as ‘background-color: inherit’.
Can anyone point to any implementation issues which I may not be considering?
Yes, a currentBackgroundColor keyword could exist and was proposed in 2020. However, it does not yet exist.
Here are three ways to get close to this concept:
You can use non-root CSS variables rather than the currentColor keyword. Since these variables can be scoped, you can change them on a per-element basis, though this approach can't navigate colored children like <a> tags. (The question mentions CSS variables in a manner that appears to miss that these can be redefined throughout the stylesheet cascade.)
The Canvas system color, which is defined as the "background of application content or documents". Just to be safe, I also set the text color to CanvasColor to ensure I'm not accidentally implementing white-on-white or black-on-black.
However, this will not reflect the page's CSS—even body { background-color:purple; }. All it does is key on the system's configuration. It does seem to match the default "dark mode" coloring scheme, which solves my particular problem.
Finally, you can invert the currentColor using a color function's relative value syntax like rgb(from currentColor calc(255 - r) calc(255 - g) calc(255 - b) / alpha)
Example implementations:
:root { color-scheme:light dark; } /* enable dark mode if so configured */
p { padding:1ex; }
.purple { background-color:rebeccapurple; color:#fff;
--bg:rebeccapurple; --fg:#fff; }
.var { background-color:var(--fg, CanvasText); color:var(--bg, Canvas); }
.canvas { background-color:Canvas; color:CanvasText; }
.invert { background-color:#fff; color:
rgb(from currentColor calc(255 - r) calc(255 - g) calc(255 - b) / alpha);
}<p class="purple">
This block is white on purple.
<span class="var">This sentence swaps fg & bg using variables.</span>
This sentence reverts to white-on-purple.
<span class="canvas">This sentence uses "Canvas" coloring.</span>
This sentence again reverts back.
<span class="invert">This sentence inverts the currentColor.</span>
</p>
<p>This is normal text.</p>