Firefox Default Themes & Theme Values

Add-ons Development
1

I want to be able to adjust my Firefox addon icon based on the theme being used in the browser. This seems pretty straight forward but must be able to handle 3 scenarios.

  1. Fully populated themes - Just grab “theme.colors.icons” and adjust your addon icon to match. (In my case, I am using a SVG and can just change the stroke to match the theme.
  2. Default themes (Light/Dark/Auto) - Will not have theme values, but can match “window.matchMedia(‘(prefers-color-scheme: dark)’)” to have a light vs. dark option.
  3. Partially populated themes - Some themes do not populate all values … especially “theme.colors.icons”. Can “try” to find similar values but this will be hit or miss as to how they look along side the theme. Could also just fall back to dark/light check if no theme.colors.icons.

In particular, I am a little surprised “Alpenglow Dark” properly returns theme.colors.icons, but “Firefox Alpenglow” does not. (Another strange thing is that the default Firefox icons are properly colored in both themes.)

Am I missing anything? (My addon is the “up arrow” in the toolbar)

Alpenglow Dark (Works great with theme.colors.icons)

2025-12-21_19-33-57
2025-12-21_19-33-571557×499 77.6 KB

2025-12-21_17-16-39
2025-12-21_17-16-391334×1338 197 KB

Firefox Alpenglow

I used theme.colors.toolbar_text as an ALT here, but not a great fit. As you can see from the theme.colors … there are no other values with HSLA(271, 100%, 77%, 1) and theme.colors.icons is not being returned.

2025-12-21_19-32-34
2025-12-21_19-32-341556×499 82 KB

2025-12-21_17-15-00
2025-12-21_17-15-001321×1345 195 KB

2

I don’t have firsthand experience with this, but it looks like you can make an SVG match the browser’s theme by setting the fill="context-fill" and fill-opacity="context-fill-opacity" on your root element.

That’s how Firefox’s internal icons appear to work. For example, here’s the extension icon that appears in the toolbar: extension.svg - mozsearch

3

Yes, that is exactly what I am trying to do … and this does work IF the value is populated in the theme itself. In this case, Alpenglow Dark properly sets theme.colors.icons, but Firefox Alpenglow does not have that value. That is how I got my icon to match one but not the other.

It just really seems hit or miss to try to adjust to themes if all of the values are not required and can be null.

I guess the way I will try to handle it is:

  1. If theme.colors.icons has a value, use that color as my addon icon color via SVG.
  2. If theme.colors.icons is null, check “window.matchMedia(‘(prefers-color-scheme: dark)’)” and display either a light or dark friendly version of the icon.

I don’t think there is a cleaner way as of now.

1 Like