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.popupreports #281d4e. - For custom themes, I managed to recreate the correct hover color by mixing
browser.theme.color.popupwithbrowser.theme.color.popup_textat 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!