CSS variable won’t get set | Electron

I’m currently having an issue with CSS variables not being set, I’m using electron and im trying to set it like this:

  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);
    });
  }

And i’ve my variables defined like so:

: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);
}

The color is printed, but the variable is not being set. I’ve seen ‘BlinkFeatures’ and i’ve enabled those too, i still can’t get it to work. Anyone know what’s going on?

Answer

I think this is a problem of css specificity. :root points to the document trees root (HTML tag) and so does document.documentElement except :root has higher specificity (as seen here)

To solve this problem you should probably set the variable overrides to e.g. body tag or change :root {} to html {}