How to detect the dark theme in a WebExtension?

Add-ons Development
#1

We’ve had this discussion about the icon, but now I also want to adjust the design of my WebExtension popup itself when the user is using a dark theme.

It just looks not nice like that:

56685155-95447380-66d1-11e9-9d1c-d65d86a76345.png719×840

It should just use a custom dark theme then. Similar to how Firefox’ internal add-ons/popups do…

How to solve?

Actually, with the new prefers-color-scheme CSS media feature introduced in Firefox 67, websites can request whether the system uses a dark or light theme!

This is awesome! Obviously, because add-ons can do the same!

However Firefox really only sets prefers-color-scheme to “dark” when the system theme is dark!
When you only change Firefox’ own theme (which changes the title bar etc.) to “dark”, it does not work.

Is this what we want?

IMHO, at least for add-ons, this is not so good, because actually it looks as awkward, when the website and system is light, but the popup of the add-on that originates from the dark Firefox UI is light:
image

vs

image

Also for sidebars this is possibly even worse, as they take even more screen space.

Ideas

So what could we do?

  • Firefox could just return the Firefox’ internal style for WebExtensions when they use prefers-color-scheme.
  • Or a new JS API or CSS selector for WebExtensions?
  • Or is there actually some way, to detect all this currently?
1 Like
#2

pretty sure it’s supposed to be possible to not set the panel background and text color and just use those.

#3

Ah, good idea, I’ll need to test that… :smile:

#4

I’ve found a way to adapt popup color by getting the Theme object of the current window.

Here’s what I use in my popup.js script:

browser.theme.getCurrent().then(function (theme) {
    if (theme && theme.colors) {
        const colors = [
            `--color-background: ${theme.colors.popup}`,
            `--color-primary: ${theme.colors.popup_text}`,
        ];
        document.body.setAttribute('style', colors.join(';'));
    }
});

I set custom CSS properties on my popup’s body element, and I use that custom CSS properties in my popup.css stylesheet. You can get a listing of the available values with console.log(theme.colors). The output will be displayed in the popup console you can get by going to about:debugging and inspecting your extension.

2 Likes
#5

BTW if you only care about detecting the system dark/light design, you can alternatively (without an extra theme permission), also prefers-color-scheme. It allows you to detect whether the system/user wants a dark website, so you can adjust your CSS. You can check that with JS, too.

2 Likes
#6

Correct.

To check for OS-level Dark Mode, simply do:

if (window.matchMedia && !!window.matchMedia('(prefers-color-scheme: dark)').matches) {
    console.info('Dark Theme detected 🌒 ')
}

Kind Regards,
S

1 Like