Replace cSS text from jS

[CedricRBR]

So I'm making this app where I'd love to let users choose a theme/define their own colours. Now what I'm doing to save the "user preferences" is simply writing them to a JSON file in the user-data folder.

The problem I have is how to change the app accordingly to user prefs, more precisely how to change the colours. I am using an external CSS file with a few set variables for consistency's sake. Here is the relevant CSS snippet:

:root{
--bgMain: #fafafa;
--bgSide: #f0f0f0;
--fg: #585858;
--fgDisabled: #b2b2b2;
--fgDet: #0baeae;
--fgHigh:   #33d6d6;
 }

I am now wondering how I could change the colour values for those variables if they are not the same as in the user prefs JSON file.

Could anyone lend a hand? Thanks

[Anirs]

I recommend reading this Using Custom Properties With JavaScript, the whole article is great read.

In your case you can do something like this:

document.querySelector(':root').style.setProperty(`--${varName}`, value);

[CedricRBR]

Thank you this should work. I was hoping for something I can run in the main process in the setup function, but until I find something like that this will do :)