javascript - CSS变量将不会设置| Electron

Question

我目前有一个问题，未设置CSS变量，我正在使用electronic，我试图像这样设置它:

  for (let Button of ThemeButtons){
    Button.addEventListener("click", e =>{
      let Color = Button.style.backgroundColor;
      let root = document.documentElement

      console.log(Color)
      root.style.setProperty('--CurrentA', Color);
      root.style.setProperty('--CurrentB', Color);
      root.style.setProperty('--CurrentC', Color);
    });
  }

我的变量定义如下:

:root {
  --red:#923333;
  --orange:#d68a00;
  --green: #0d840d;
  --blue: #1c4a90;
  --purple: #6a1d8a;
  --dark: #313131;
  --gray: rgb(68, 68, 68);
  --light: #b7b7b7;

  --CurrentC: rgb(85, 85, 85);
  --currentA: rgb(68, 68, 68);
  --currentB: rgb(53, 53, 53);
}

颜色已打印，但未设置变量。
我已经看过“BlinkFeatures”，并且也启用了这些功能，但仍然无法正常工作。有人知道发生了什么吗？

Answer 1

我认为这是CSS特殊性的问题。 :root指向文档树的根(HTML标记)，而document.documentElement也指向，除了:root具有更高的特异性(如here所示)
为了解决这个问题，您可能应该将变量替代设置为例如正文标签或将:root {}更改为html {}