# How to detect the dark theme in a WebExtension?

**URL:** <https://discourse.mozilla.org/t/how-to-detect-the-dark-theme-in-a-webextension/38604>\
**Category:** Development\
**Created:** [April 24, 2019, 7:39pm UTC](https://discourse.mozilla.org/t/how-to-detect-the-dark-theme-in-a-webextension/38604 "2019-04-24T19:39:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rugkx](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/rugkx/32/19322_2.png) [@rugkx](https://discourse.mozilla.org/u/rugkx)\
**Post date:** [April 24, 2019, 7:39pm UTC](https://discourse.mozilla.org/t/how-to-detect-the-dark-theme-in-a-webextension/38604/1 "2019-04-24T19:39:14Z")

</div>

[We’ve had this discussion about the icon](https://discourse.mozilla.org/t/how-to-correctly-design-color-icon-to-be-visible-across-themes/27713/10), but now I also want to [adjust the design of my WebExtension popup itself](https://github.com/rugk/offline-qr-code/issues/186) when the user is using a dark theme.

It just looks not nice like that:

 ![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/4/8/48c3c799980a7d992566e5f93fc8b247d6bc56cd.png)

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](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 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](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/6/7/67b7275cc5ef5f27ed66d54bb5152e30410bfd61.png)

vs

 ![image](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/4/a/4abfe31dcde04278a4805dde70b339d6d7a40a87.png)

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?

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [April 24, 2019, 7:52pm UTC](https://discourse.mozilla.org/t/how-to-detect-the-dark-theme-in-a-webextension/38604/2 "2019-04-24T19:52:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rugkx](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/rugkx/32/19322_2.png) [@rugkx](https://discourse.mozilla.org/u/rugkx)\
**Post date:** [April 24, 2019, 7:53pm UTC](https://discourse.mozilla.org/t/how-to-detect-the-dark-theme-in-a-webextension/38604/3 "2019-04-24T19:53:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jerome](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jerome/32/31321_2.png) [@jerome](https://discourse.mozilla.org/u/jerome)\
**Post date:** [October 31, 2019, 10:39am UTC](https://discourse.mozilla.org/t/how-to-detect-the-dark-theme-in-a-webextension/38604/4 "2019-10-31T10:39:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rugkx](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/rugkx/32/19322_2.png) [@rugkx](https://discourse.mozilla.org/u/rugkx)\
**Post date:** [December 6, 2019, 6:44pm UTC](https://discourse.mozilla.org/t/how-to-detect-the-dark-theme-in-a-webextension/38604/5 "2019-12-06T18:44:36Z")

</div>

BTW if you only care about detecting the system dark/light design, you can alternatively (without an extra `theme` permission), also [`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/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](https://developer.mozilla.org/docs/Web/API/Window/matchMedia).

---

<div class="post-metadata">

**Author:** ![sidneys](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/sidneys/32/39847_2.png) [@sidneys](https://discourse.mozilla.org/u/sidneys)\
**Post date:** [July 31, 2020, 11:53am UTC](https://discourse.mozilla.org/t/how-to-detect-the-dark-theme-in-a-webextension/38604/6 "2020-07-31T11:53:26Z")

</div>

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