Can an Extension detect dark mode?

I have a live extension which outputs text (in default browser colors i.e. #000000), however I have had feedback that this text does not change colour when Twitch dark mode (or third party dark mode, for that matter) is activated. I appreciate third party dark mode might be difficult to account for, but surely something like onContext() should at least let us know if the viewer is using native dark mode?

Alternatively, is there a CSS way to work this out that I am naively missing? As far as I understand, the iframe our Extension is rendered in doesn’t have any visibility of its parents so can’t adapt to their colours… Any advice here is much appreciated!


Well that only works for Video Overlays. (No onContext for panels last I checked)

The simplest solution is to not have your panel using a transparent background.

Thanks for the note re onContext() - I wasn’t aware of that, but makes sense given the current data it returns.

And whilst forcing a white background may make the text readable, I would be hesitant to call it a solution. If the viewer has chosen their Twitch background to be dark, then a bright white panel appearing in the middle of it all would look to them like an issue. From the perspective of my Extension’s design, any background color/text combination is fine, it just needs a way to know which to display. I know I could go for a neutral option somewhere in the middle, but that would really result in the panel looking “OK” in both views and “good” in neither.

Given that Twitch now has a native dark background I would really expect there to be a way for an Extension to know if this is selected.

1 Like

Perhaps time for two themes and to allow the broadcaster to choose which one they want, or use a more neutral theme, that works on both.

So far out of three extensions (two panel one video), my two panel ones are darkish backgrounds anyway.

That would be handy!

1 Like

This is also something we’d like to see. I can imagine this being passed in using onContext (so we can immediately react to the user switching and rerender with a different text color), or using document.location (similar to how anchor, language and mode are passed in right now).

Our use-case right would specifically be the config mode, but I can imagine this also being generally relevant on dashboard, and on viewer specifically for panel extensions.