Support for Light themes

[Matteo Gratton]

It could be good to have support for your computer's light/dark themes (in macOS, it can be automatic; I don't know about others).

You can edit the header of userChrome.css like:

:root {
  color-scheme: light dark; /* both supported */
  --sfwindow: #19171a;
  --sfsecondary: #201e21;
  --icon-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(190deg) brightness(104%) contrast(102%);
  --icon-fill: fill: white !important;
}

@media screen and (prefers-color-scheme: light) {
  :root {
    --sfwindow: #ffffff;
    --sfsecondary: #edebf2;
    --icon-filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(190deg) brightness(104%) contrast(102%);
    --icon-fill: fill: grey !important;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --sfwindow: #19171a;
    --sfsecondary: #201e21;
    --icon-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(190deg) brightness(104%) contrast(102%);
    --icon-fill: fill: white !important;
  }
}

And change all the icons' CSS from:

fill: white !important;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(190deg) brightness(104%) contrast(102%) !important;

to:

fill: var(--icon-fill);
filter: var(--icon-filter)

I did it on my laptop, and it works like a charm 😊
The colour combination for the light theme could be any of your choices: This White and Light Gray options works good for me 😉