我有一个包含主题颜色值的css自定义属性:var(--themeColor)。
当主题颜色为white时，我想检查它的值，然后我可以将background-color的值更改为另一个值。
例如:
.btn {
background-color: var(--themeColor) == "white" ? "red" : var(--themeColor);
}
您可以使用以下js片段读取css变量值:
getComputedStyle(document.documentElement).getPropertyValue('--themeColor').trim();
因此，使用样式组件，您可以实现这个三元运算符测试，以获得颜色:
.btn {
background-color: ${getComputedStyle(document.documentElement).getPropertyValue('--themeColor').trim() === "white" ? "red" : "var(--themeColor)"};
}
