html-如何仅在CSS变量存在时使用它们？

我有一些CSS,我想要一个默认颜色,然后用一个变量覆盖它.当CSS变量不存在时,我要使用后备颜色.

:root {
    /*--tintColor: red;*/
}

.text {
    color: blue;
    color: var(--tintColor);
}

如果未设置变量,例如注释掉,颜色将变为黑色.在这种情况下,我希望在未定义变量时颜色变回蓝色.这可能吗？

最佳答案

您可以指定fallback属性,例如var(-tintColor,blue)-请参见下面的演示：

.text {
    color: blue;
    color: var(--tintColor,blue);
}

<div class="text">some text here</div>
<div class="text" style="--tintColor: red">some text here</div>