Add a way to emulate Dark Mode from DevTools

NEW
Unassigned

Status

enhancement
P3
normal
2 months ago
10 days ago

People

(Reporter: kohei, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

While developing Dark Mode for Bugzilla, I noticed that Safari’s Web Inspector offered a Dark Mode toggle button along with the print media button, which has been added to Firefox too. It would be nice to have the Dark Mode emulator in Firefox DevTools.

Thanks for filing Kohei.

Here's the excerpt from Safari's site:

Web Inspector now includes a navigation bar button in the Elements tab to toggle dark or light mode, depending on your current overall system preference. This allows you to quickly test pages in both appearances without having to toggle the whole system appearance in System Preferences. The Styles sidebar updates to reflect the current matching rules, as well as any CSS color variables.

To try it out, you can do the following:

  • open Safari
  • open this page: https://bugzilla.mozilla.org/show_bug.cgi?id=1550804
  • open the Safari devtools, the Elements tab
  • select the <html> element
  • click the little dark browser window in the toolbar
  • notice how the page shifts to its dark mode, even though you didn't change the system preference
  • also notice how the :root CSS rule in the Styles tab now shows the @media prefers-color-scheme rule
Priority: -- → P3
Duplicate of this bug: 1563674
You need to log in before you can comment on or make changes to this bug.