Edit .css using javascript (with brackets)

Question

I saw some threads talking about this, but I don't see anyone how to change .css when you have brackets in your .css

I have a .css in my header, and I want to give my users the ability to change the background color and the text color.

Using inspector in my website I detected which pieces of CSS do that.

Color text is inside this .filepond--file:

.filepond--file {
  position: static;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0.5625em 0.5625em;
  color: #fff;
  border-radius: 0.5em;
}

And the background is here:

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
  background-color: #369763;
}

How should I change the color of both things using javascript? Thanks!

Answer 1

You dont need to edit css stylesheets. You can add your own style element to the page, which can overwrite the previous styles.

eg

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.filepond--file { color: #F00 !important; }';
style.innerHTML = '[data-filepond-item-state='processing-complete'] .filepond--item-panel { background: green !important; }';
document.getElementsByTagName('head')[0].appendChild(style);

for example, if you copy paste the below code into StackOverflow developer console, it will make the post code black/white.

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.prettyprint { color: white; background: black }';
document.getElementsByTagName('head')[0].appendChild(style);