I’ve noticed a challenge when trying to give my extension a native firefox look. It seems that Firefox uses some sort of internal color computation for browser.themes that isn’t accessible to developers. This is an issue when trying to exactly match native popup colors, especially when trying to match the hover-colors.
What I’ve Found:
With the native Dark theme, the native popup background is #42414d, which matches browser.theme.color.popup.
But with Alpenglow, the native popup is #2d245b, even though browser.theme.color.popup reports #281d4e.
For custom themes, I managed to recreate the correct hover color by mixing browser.theme.color.popup with browser.theme.color.popup_text at 16.86% opacity (when both are greyscale).
Mixing the native Dark theme popup color with the popup_text does not produce the same color in the native popup as in my own extension—unless I create a custom theme using the dark theme’s popup (#42414d) and popup_text (#fbfbfe) values at which point they match.
This suggests that Firefox might be processing native themes a bit differently than custom themes. Either way, this obscurity may be by design to protect against misuse, or more likely just to improve contrast, but it makes it tough to get things right (essentially impossible) when trying to design an accessible extension that matches the users browser theme.
What I’d Love to See:
An API to Get the Computed Colors:
An API function that returns the pre-mixed colors. That way, extensions could match the system theme exactly.
Some Docs on the Process:
If exposing an API is too much, maybe Mozilla could at least document the blending algorithm. This would help us mirror the behavior on our end.
I’m curious if anyone else has run into this or if Mozilla has any plans to open up these details. Thanks for any thoughts or suggestions!
What do you mean when you say that #42414d “matches browser.theme.color.popup”?
Something could just be escaping me at the moment, but I can only think of two ways for an add-on to interact with theme values: using browser.theme.getCurrent() and CSS’s keywords. Is browser.theme.color.popup shorthand for something like this?
(await browser.theme.getCurrent()).color.popup;
Anyway, back to your questions. There are a couple of open bugs related to styling extensions based on the browser theme:
IMO it’s currently prohibitively difficult for an extension to match the user’s selected browser theme. While theme.getCurrent() allows extensions to get light theme colors, if the theme supports both light and dark modes, the getCurrent() method will only return the light theme values. That’s … not ideal.
I am not sure where I got browser.theme.color.popup from, I meant (await browser.theme.getCurrent()).color.popup like you said.
I didn’t find those threads before. Thank you for sending them to me.
I think the best solution would be for the API to offer a complete set of color values that developers can use to build accessible, themed browser extensions with minimal effort. Ideally, creating a good-looking and accessible extension should be as simple as using Google’s Material theme for app development.
Since this is likely not gonna happen by itself, I was considering making a small library to generate the colors. This means I have to figure out exactly how the mixing of the the API colors works to create the “pre-mixed” colors used in the official Firefox extensions (if possible). The goal would be to provide the extension developer with usable CSS variables, so the user of the library could write, for example, background-color: var(--button-background-color-hover); to get the same color that is used when hovering a button in the built-in Firefox extensions.
However, it appears that I will encounter additional issues with the default theme, based on the other links you posted. The inconsistencies I talked about in my original post may be related to 1435216.
I think either way, I might give it a go even if it won’t work for all themes. I just need to backwards-engineer the colors, which seems difficult but not impossible based on the results in my initial post.
If you have any advice, knowledge or links that you wish to share with me to help me (and others who find this thread) on that journey, I would appreciate it.
Either way, I think this thread could be considered solved. Thank you for your help!