Skip to content

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 =;
      let root = document.documentElement
      console.log(Color)'--CurrentA', Color);'--CurrentB', Color);'--CurrentC', Color);

And i’ve my variables defined like so:

:root {
  --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?


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 {}