Theming support: remove dependence on `content-fill` and similar platform dependant attributes

[RealRaven2000]

At them moment, quickFilters' svg icons rely heavily on the internal support for context coloring - this is something that is not supported on support pages (any HTML page that a web extension may create). therefore I am migrating all colors to be theme aware (supporting both bright and dark modes) by adding correct switches within the svg code.

the special configuration switch svg.context-properties.content.enabled = true can currently be used to allow content code to access context coloring which exposes certain variables into the svg styles. This is switch is by default disabled and may be removed in the future, so instead we want to make this more robust by removing such references from the svg icons.

Some problems are already apparent in the main menu button:

[RealRaven2000]

So here is an example for a svg image used by Thunderbird (leaving out Mozilla license comment for brevity)

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.5 10a2.481 2.481 0 0 0-.379.038L3.977 1.214a2.5 2.5 0 0 0-.371 3.515l2.789 3.444-1.51 1.866A2.486 2.486 0 0 0 4.5 10a2.522 2.522 0 1 0 2.329 1.609L8 10.159 9.172 11.6A2.5 2.5 0 1 0 11.5 10zm-7 3.75a1.25 1.25 0 1 1 1.25-1.25 1.251 1.251 0 0 1-1.25 1.25zm7 0a1.25 1.25 0 1 1 1.25-1.25 1.251 1.251 0 0 1-1.25 1.25zm.9-9.021a2.5 2.5 0 0 0-.371-3.515L8.5 5.569l1.608 1.986z"/>
</svg>

I extended the icons as follows by adding a style block and (in this case) removing fill="context-fill" and fill-opacity="context-fill-opacity" .

Here is the added style block:

  <style>
  :root {
    --basiccolor: rgb(20,20,20);
    --fill: var(--basiccolor);
    --fill-opacity: 0.9;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --basiccolor: rgb(251,251,254);
      --fill: var(--basiccolor);
      --fill-opacity: 0.8;
    }
  }
  </style>
  <path 
    style="fill:var(--basiccolor); fill-opacity:var(--fill-opacity);"
    d="M11.5 10a2.481 2.481 0 0 0-.379.038L3.977 1.214a2.5 2.5 0 0 0-.371 3.515l2.789 3.444-1.51 1.866A2.486 2.486 0 0 0 4.5 10a2.522 2.522 0 1 0 2.329 1.609L8 10.159 9.172 11.6A2.5 2.5 0 1 0 11.5 10zm-7 3.75a1.25 1.25 0 1 1 1.25-1.25 1.251 1.251 0 0 1-1.25 1.25zm7 0a1.25 1.25 0 1 1 1.25-1.25 1.251 1.251 0 0 1-1.25 1.25zm.9-9.021a2.5 2.5 0 0 0-.371-3.515L8.5 5.569l1.608 1.986z"/>

note that I am using no media rule as default (which should cover light themes) and overwrite them for dark mode. The path tag then includes fill attributes that can use these variables.

[RealRaven2000]

implemented in 6.5.2 - Published 09/08/2024