My current dilemma involves CSS variables not being properly set. I am utilizing electron and attempting to establish them in this manner:
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);
});
}
I have defined my variables like this:
: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);
}
While the color prints accurately, the variable remains unset. I have explored 'BlinkFeatures' and configured them accordingly, yet the issue persists. Any insights into what might be causing this?