External SVGs Do Not Inherit CSS Context (Variables, currentColor, Styles) in Thunderbird

[RealRaven2000]

I've noticed that when using external SVGs (e.g., via background-image: url("icon.svg") or ), they do not inherit contextual CSS properties from the parent document. This includes:

• CSS variables (var(--my-color))
• currentColor
• Other inherited styles (e.g., text color, theme-based properties)

Expected Behavior:

External SVGs should be able to inherit styles from the parent document, similar to inline SVGs.
This would allow proper theming and avoid needing separate assets for different themes (e.g., dark mode).

Current Workarounds:

• Inlining SVGs in HTML (not ideal for maintainability).
• Manually injecting styles via JavaScript.
• Creating multiple SVG files for different themes (clunky and inefficient).

Steps to Reproduce:

• Define an external SVG file (icon.svg) that relies on CSS variables or currentColor.
• Include it via background-image or <img>.
• Observe that styles do not apply as expected.

Possible Solutions / Requests:

• Investigate whether this is a Thunderbird-specific limitation or a broader web API issue.
• Consider allowing CSS inheritance for external SVGs in Thunderbird’s UI.
• Check if a related Mozilla bug exists, or file one if necessary.

This issue makes consistent theming harder for add-ons, especially in contexts where inline SVGs are not a viable option.

case in point - the following icon (settings tab, selected) only looks good in dark mode. It definitely generates accessibility issues in bright mode:

[RealRaven2000]

I implemented a nice workaround in v6.10:

I can pretend to the svg that it is in dark mode for the active button which will force the bright color:

  .tabs button:hover, .tabs button:focus-within {
     color-scheme: dark; /* force bright icon on active tab */
  }

[RealRaven2000]

fixed in v6.10 released on 17/03/2025