1591679 - Add an option to auto-darken web pages that don't have a dark color-scheme

Status: NEW

(Core :: Layout, enhancement, P3)

Description

[volpedifuoco]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Why/User Benefit/User Problem

As a user, I want my browser to be able to force websites content to use dark mode, so I can have control over how my browser in customized to match my preferences.

What / Requirements

• There exists a setting that forces web content to use a dark theme
• There exists an easily accessible escape hatch to get out of the forced dark theme if the website breaks

Acceptance Criteria (how do I know when I’m done?)

• I can choose to view website content in dark mode.
• I don't see a flash of white/light colors before the dark theme is applied.
• I can interact with the sites when the dark theme is force applied.

We avoid cases where we use dark foreground and background colors. For example testing forms is a common source of problems.

Same feature request on the Firefox Preview Github page: https://github.com/mozilla-mobile/fenix/issues/2139

Essentially, it is the same feature introduced recently in Chromium stable channel (chrome://flags/#enable-force-dark), on both desktop and mobile.

Comment 1

[Marco Bonardo [:mak]]

Emilio, any idea where this should be tracked? Does it require layout specific support?

Comment 2

[Emilio Cobos Álvarez (:emilio)]

So there's a devtools setting to allow emulating prefers-color-scheme: dark which already landed (bug 1550804).

I don't think we render form controls differently based on prefers-color-scheme, so that should be all that's needed until we make that change, if we do that at all, right? Or am I misunderstanding?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Oh, I missed what the Chrome flag did (because apparently it needed a restart). So this is about auto-darkening web content, by filtering colors and inverting presumably?

That sounds a bit of a different thing, and yeah, that'll most likely need layout engine support (https://drafts.csswg.org/css-color-adjust/ is where some of these proposals are).

Comment 4

[zesanup]

What's the status of this bug as of now? All its dependencies seem to have been resolved, but there's no visible movement.

It would be pretty great to have parity with Chromium, where you can just flip a toggle for glorious, and yet performant, dark mode everywhere. Extension use is a nice workaround, but there's a bit of an arms race there where they sometimes need to catch up to website changes.

Comment 5

[Mandy Cheang [:mcheang][she/her]]

Moving this for core layout, they will have a better response. Thank you.

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to zesanup from comment #4)

What's the status of this bug as of now?

I don't think any progress has been made. (Also: I'll adjust the bug title to clarify what the actual request is here.)

All its dependencies seem to have been resolved, but there's no visible movement.

The bugs that are marked as dependencies don't actually seem to have been about the feature being requested here, and they all seem to have been resolved for reasons unrelated to patches having been landed in Firefox.

It would be pretty great to have parity with Chromium, where you can just flip a toggle for glorious, and yet performant, dark mode everywhere. Extension use is a nice workaround, but there's a bit of an arms race there where they sometimes need to catch up to website changes.

Agreed, it would be great! The layout folks are a small team juggling lots of competing priorities, though, and there are other projects that are likely to remain higher priority than this for the forseeable future. For now, the "Dark Reader" extension is probably your best bet.

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with color-scheme:light)

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (with 'color-scheme:dark') - this one should probably render with a white background

Just to prod a bit at what Chrome's chrome://flags/#enable-force-dark feature actually does -- it seems to have no effect if the page declares color-scheme: dark (in which case Chrome hands off darkening responsibility to the page itself). Here's a testcase to illustrate that, where there's a declared color-scheme: dark with an explicitly-white background which Chrome does not darken.

(This behavior makes sense, I think; just posting the testcase for the benefit of folks potentially working on this in the future and wondering about edge cases like this.)

Comment 10

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase 1,2,3 rendering in Chrome with auto-darkening enabled

Comment 11

[zesanup]

Awesome. Thanks for all the details! Currently I use Dark Background Light Text as Dark Reader tends to slow the browser more. There's also Bug 1848474, but I haven't checked whether it's still an issue. I'll do that.

Comment 12

[08xjcec48]

Please add the relevant Mozilla Connect discussion to the See also field: https://connect.mozilla.org/t5/ideas/built-in-dark-mode-for-web-contents/idi-p/283 .

The absence of this feature is a security issue. People install extensions for this and then are told to change extensions.webextensions.restrictedDomains in about:config to be able to make the background of addons.mozilla.org itself dark.

As zesanup pointed out, the most popular of such extensions (Dark Reader) can also be a resource hog, leading users to migrate to browsers that already offer it as a built-in feature.

Comment 13

[Emilio Cobos Álvarez (:emilio)]

I think a good first step here would be to figure out what the effect of this flag really is in other browsers. Is it done at the CSS color level, or at the graphics level (using filter() and so on)?

I'd be happy to mentor an implementation of this if someone is interested. But definitely not a security bug tho :)