Content Dark Mode: prefers-color-scheme CSS media query

[mheubusch]

As a user with the Native Dark Theme/UI applied to Fenix, I want websites to display content in dark mode when the site publisher has created a palette that supports it so I will have less screen brightness and find the visual experience more pleasing.

Dependencies (Added by PM and Eng)

• No UX required for this
  GeckoView will need a new API for Fenix's dark mode setting to tell Gecko to enable CSS dark mode (aka prefers-color-scheme media feature): https://bugzilla.mozilla.org/show_bug.cgi?id=1529972

Acceptance Criteria (Added by PM)

I can visit a site that supports dark mode and view content in dark mode (for example, https://kevinchen.co/blog/support-macos-mojave-dark-mode-on-websites/)
I can visit a site that does not support dark mode and will see the default light content mode
I can switch my browser theme to light mode and visit a site that supports dark mode and view content in default/light mode.

┆Issue is synchronized with this Jira Task

[bleonard252]

How does one enable this dark mode? I can't get the latest master to build

[cadeyrn]

@bleonard252: There is no dark mode yet. As you can see the issue is still open and in the Milestone 4 backlog with a due date of April 24 (but even if the milestone dates are not binding of course).

[bleonard252]

So this is a hypothetical situation?

[cpeterso]

This Fenix issue refers to Gecko's prefers-color-scheme CSS media query, which allows websites to know whether the user prefers light or dark CSS color scheme or has no preference. Fenix will add a setting UI for users to set light, dark, or no preference. Perhaps Fenix could automatically switch to "prefers dark color scheme" if the user enables Android's Night Mode.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[cpeterso]

@mheubusch - How does a user set their CSS dark mode preference (light, dark, no preference)?

The user story above says "No UX required for this" but it also says "I can switch my browser theme to light mode and visit a site that supports dark mode and view content in default/light mode."

Will the CSS dark mode preference be implicitly controlled by the browser's light/dark theme setting? Will it auto-detect whether Android OS's "Night Mode" is enabled?