当你这样做

:root {
  --theme-color: #ff0000;
}
tr {
    background: rgba(var(--theme-color), 0.2);
}

浏览器只是照字面理解。你最后会得到

tr {
    background: rgba(#ff0000, 0.2);
}

这对于rgba来说是无效的语法。如果你打开浏览器控制台并检查样式，你会发现它是无效的。
您有几个选项：
1.得到你的十六进制颜色的rgb等价值并使用它，在你的例子中，#ff0000的rgb等价值是255, 0, 0，所以你可以使用rgba(255, 0, 0, 0.2)。
1.设置8字符十六进制格式的不透明度。参见Hexadecimal color code for transparency。在您的情况下，它将是#ff000033。
1.如果你使用的是像Sass这样的预处理器，你可以使用一个color函数来编程设置变量中的不透明颜色的值。例如，Sass有transparentize函数。其他预处理器有等价的函数，所以你可以在Google上搜索。
1.使用实际的CSS opacity属性。

tr {
  background: var(--theme-color);
  opacity: 0.2;
}

不过请注意，这与在background-color中更改alpha值并不完全相同，不透明度会影响整个元素及其子元素，因此您可能需要更改HTML/CSS的操作方式，以获得相同的视觉效果。

它实际上是这样工作的：

:root {
    --color: 255,255,0;
  }
  body {
    background: rgba(var(--color), 0.5) !important;
  }