Dark theme support: Make coloring of svg icons independent of Mozilla specific context switches

[RealRaven2000]

Without the switch svg.context-properties.content.enabled = true enabled svg icons on the SmartTemplates preferences screens are hard to read in dark mode:

It also affects some of the follow up action icons:

In order to make theming colors more robust, let's instead include the color variables within the svg and use a media query to trigger the view from within.

[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]

Here is a preview version with the new icons:

smartTemplate-fx-4.7.1pre13.zip

---

To install, download archive and drop into Thunderbird Add-ns Manager (without extracting contents).

[MarkyMarkDE]

yep, work as expected

[MarkyMarkDE]

@RealRaven2000 have you created the svg files byself or are this out of the box?

[RealRaven2000]

@RealRaven2000 have you created the svg files byself or are this out of the box?

I created some of them myself, but the write / reply / forward / support (chat) and Global Settings are variations from the Thunderbird Core app. But I removed the "context" attributes because they are not standard (and bound to fail in html without the special switch or if / when Mozilla drops support)

[MarkyMarkDE]

@RealRaven2000 have you created the svg files byself or are this out of the box?

I created some of them myself, but the write / reply / forward / support (chat) and Global Settings are variations from the Thunderbird Core app. But I removed the "context" attributes because they are not standard (and bound to fail in html without the special switch or if / when Mozilla drops support)

ah okay, nice work. By reason that the Pro Icon is being cropped off, maybe you can change this icon to a 16x16px golden crown icon or something ...

[RealRaven2000]

very strange - looks like the wrong font also. Maybe I need to include that one somehow (It's called Bahnschrift) didn't know this wasn't embedded in the scv automatically. Good catch.

[RealRaven2000]

it should look like this:

[MarkyMarkDE]

it should look like this:

It should but didn't 😉. The "I" icon and the pro icon looks completely different here as on your screenshot. Maybe it would be better, to replace this font based icon and replace it with a "graphical" one. By the way: have you changed the font for the SmartTemplates Pro banner? Looks also funny here.

[RealRaven2000]

The "I" icon and the pro icon looks completely different here as on your screenshot. Maybe it would be better, to replace this font based icon and replace it with a "graphical" one.

yeah I thought inkscape would do this automatically but I researched it yesterday and apparently there is way of converting fonts to path, so gotta do that with all the variations of the License icons, and any (i)nformation ones, too.

By the way: have you changed the font for the SmartTemplates Pro banner? Looks also funny here.

I don't think so... but it may be that the original png got lost? It looks like this on Windows10:

[RealRaven2000]

@MarkyMarkDE see also my comments on QuickFolders (I thought I appended them here but don't want to duplicate it)

https://github.com/RealRaven2000/QuickFolders/issues/489#issuecomment-2283500070

[RealRaven2000]

Here is a version with converted icons (I turned all text icons to paths so they should look the same everywhere, independent on which are installed or not):

smartTemplate-fx-4.7.1pre16.zip

---

To install, download archive and drop into Thunderbird Add-ns Manager (without extracting contents).

[MarkyMarkDE]

the Pro Icon is great now, but the "i" icon ... see:

[RealRaven2000]

how about now:

smartTemplate-fx-4.7.1pre19.zip

looks like this in windows:

you can save space with the screenshot if you make the Thunderbird window smaller.

[MarkyMarkDE]

how about now:

smartTemplate-fx-4.7.1pre19.zip

looks like this in windows:

you can save space with the screenshot if you make the Thunderbird window smaller.

now all is fine!

[RealRaven2000]

I might add a nicer color scheme for the top icon (account templates) and Variables for dark mode while I am at it. I have figured out how to do this now, just need to target the correct elements (fill / stroke) to make it work...

[RealRaven2000]

More color tweaks in this one. For variables in dark mode I just need to figure out how to change the gradient in visual studio without messing it up, inkscape makes a very weird / complicated structure. Once I know how I will darken the green gradient.

smartTemplate-fx-4.7.1pre24.zip

[RealRaven2000]

OK, final version below. Fixed the graident on "Variables" in dark mode and applied similar stylinh to "Examples" as in Account templates. So this should be not such an eye sore in dark mode anymore:

smartTemplate-fx-4.7.1pre31.zip

---

To install, download archive and drop into Thunderbird Add-ns Manager (without extracting contents).

[RealRaven2000]

Implemented in 4.8 - published 03/09/2024