Estoy haciendo una extensión de Chrome con una ventana emergente, que también cambia el css de ese sitio web. Hay una entrada de color que recibe la ventana emergente, y el fondo debería cambiar de color en función de eso. Estoy usando una variable css en websiteCss.css, que cambia el sitio web una vez.

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

Sé que body.replit-ui-theme.light funciona porque lo he hecho antes, con una constante. Mi JS se parece a:

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

Donde el fondo es el selector de color y --bg es variable.

El color del sitio web cambia, pero la entrada no lo cambiará después. ¿Alguna ayuda?