I am making a chrome extension with a popup, that also changes the css of that website. There is a color input that the popup receives, and the background should change colors based on that. I am using a css variable in websiteCss.css, which changes the website once.

:root{
    --bg: #ff00ff;
}
body.replit-ui-theme.light{
    --replitVariableThing: var(--bg);
}

I know that the body.replit-ui-theme.light works because I have done it before, with a constant. My JS looks like:

document.addEventListener('DOMContentLoaded', documentEvents  , false);

document.getElementById('background').value = "#1BFFFF"

function documentEvents(){
  var r = document.querySelector(':root');
  
  function reload(){
    var color = document.getElementById('background').value
    r.style.setProperty('--bg', color);

    document.body.style.backgroundImage = "linear-gradient(to right, #2E3192,  " + color + ")"
    
    if(Math.random(0,1) < .1){
      console.log(color)
    }
    window.requestAnimationFrame(reload)
  }
  
  window.requestAnimationFrame(reload)
}

Where the background is the color picker, and the --bg is variable.

The website's color changes, but the input will not change it afterwards. Any help?