Fenix: Force web content to use dark mode

[kbrosnan]

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.

Workaround

• Use a dark mode addon like Dark Reader

[serovar]

Chrome just added this feature to its stable channel (version 78) on both desktop and mobile.

[andreicristianpetcu]

Where is this feature in Chrome? @serovar
It seems to have dark/light themes that propagate in sites that support it. Fenix shipped this first. You seem to be talking about another feature, right?

[serovar]

Where is this feature in Chrome?

chrome://flags/#enable-force-dark

It seems to have dark/light themes that propagate in sites that support it. Fenix shipped this first. You seem to be talking about another feature, right?

Yes, this feature is the same as the feature request here, that is to force a dark theme everywhere, even on websites that do not support it.

[serovar]

Opera just added this feature.

Samsung Internet has had this feature for a long time too.

[siggib4]

Exactly, Samsung Internet has the feature already for a long time. The missing dark mode (showing all pages in dark mode) is the reason why I'm currrently not using Firefox Preview.

[Poopooracoocoo]

I think this would be best as a setting that isn't on by default (for the dark theme) and can be enabled (if main setting is off) or disabled (if main setting is on) per site while respecting sites that support prefers-color-scheme ofc. Opera's settings look nice! B-)

[NotWoods]

Blocked on Gecko support: BZ-1591679

[Poopooracoocoo]

This option should be easy to be turn on in the onboarding process.

Here's what Chrome's option looks like:

stolen from XDA :P

[GitHubUserNameDuck]

I created my first GitHub account for the sole purpose of supporting this feature request 😀

The 6 pillars of a great mobile web browser:

• Open source.
• Extensions (adblock).
• Native dark mode for web content. ⭐
• Great performance.
• Ability to play youtube videos in the background.
• Bottom address bar.

Here's Kiwi browser's excellent dark mode, which you can change between grey, pitch black and anything in between (#000000 in the following image):

[RuthlessRuler]

Can the ability to add Filter for Color Temp/Blue Light Filter be also integrated to give more control over pages. this way It will make it a lot ore easier to read in Night.

[kayzzen01]

I must have about 5 things I would like to add to Firefox Preview to be perfect. I think this is between the first and the second place 😄.

[garrett]

It's worthwhile to note that while we're all patiently waiting for a native dark content mode in Firefox, there's already an approved add-on in Firefox Preview called "Dark Reader" that lets us have a form of a dark mode setting _today_. (Or tonight, as night time is really the time a dark mode is sorely needed. :wink:)

[serovar]

The problem with Dark Reader on Firefox, on mobile as on desktop, is and has always been the terrible impact on performance (it is a well known issue). It seems that we will see a major performance gain with Dark Reader V5, but after all these years I'll believe it when I'll see it. In the meantime, native solutions like the ones in Samsung Browser, Opera and Chrome, have no perceivable performance impact.

[GitHubUserNameDuck]

Furthermore, Dark Reader can't darken protected pages (such as the extension store), which browsers with native dark mode (like chromium edge) can:

[andreicristianpetcu]

shadowfox can https://overdodactyl.github.io/ShadowFox/

this discussion seems to go a bit offtopic

[garrett]

There's also the fact that when you browse to a new page, Firefox flashes a blank white page before the content loads in. (This particular issue feels like it's a bug with the dark UI of Firefox.)

this discussion seems to go a bit offtopic

Yep. At least all of the above examples of darkening add-ons for Firefox do reinforce the need for this to be handled natively.

[ekager]

There's also the fact that when you browse to a new page, Firefox flashes a blank white page before the content loads in. (This particular issue feels like it's a bug with the dark UI of Firefox.)

The first white flash is tracked by #6313 and there's a WIP fix

[kayzzen01]

The problem with Dark Reader on Firefox, on mobile as on desktop, is and has always been the terrible impact on performance (it is a well known issue). It seems that we will see a major performance gain with Dark Reader V5, but after all these years I'll believe it when I'll see it. In the meantime, native solutions like the ones in Samsung Browser, Opera and Chrome, have no perceivable performance impact.

I program some things, but I'm far from developing a browser =)
So as a programmer I was also wondering if something native in the browser would be better than using an extension (Dark Reader), not least because the last time I used some sites they did not respond as well as in the Samsung Internet that I usually use. Some pages were lost in color and some parts of the site were almost unreadable.

There remains the doubt for those who really understand the development of Firefox Preview.

[IRainman]

It is very necessary for AMOLED screens!!! Currently I use the "dark background and light text extension" in current 68 release of Firefox because only it give me possibility to get the true black background. Please add true black background.
P.S. The "Dark reader" extension is not useful because don't have true black theme only "some blue", "some gray" and other trash.
P.P.S. I use Android since 2011 (4.0) and only with AMOLED screens.

[Dunexus]

@IRainman You can adjust contrast on Dark Reader settings to have a true black theme

[szaimen]

These are the best settings for amoled dark mode imo but I already encountered some huge performance issues with the dark reader on many websites...

[yoasif]

@szaimen You can report issues with sites and Dark Reader to: https://github.com/darkreader/darkreader/issues/535

[opusforlife2]

@ekager Closing #10729 now doesn't seem prudent. The Dark Mode add-on is painfully slow, and there is no telling when _this_ issue will take up focus. I'm totally guessing here, but the Dark Background Light Text add-on would probably use more or less the same APIs as Dark Mode. Would it be difficult to add as a stopgap until this feature matures?

[andreicristianpetcu]

v4.9.9 of dark reader is fast for me

[serovar]

It is better than the previous versions but the performance impact is still evident and far from native solutions like the ones used by the competitors.

[opusforlife2]

I didn't even notice it had a version bump until I opened https://github.com/darkreader/darkreader/issues/535 again yesterday. It hasn't made any noticeable improvement. Dark Background Light Text is far superior in terms of speed, though not in terms of styling.

[IRainman]

Ok, I continue to use the "dark background and light text extension" in current 68 release of Firefox and I do not upgrade to new Firefox before you don't add this extension or add true black background - it's your choose ;) . The "Dark reader" extension is not useful because additionally slow down Firefox, I do not want this. I "barely survived" after you killed extensions on the desktop version, but on the mobile I definitely need a fast black background and Tempermonkey without them the browser is not needed and it is easier to use Chrome because it is faster. All fine :(

[igalic]

i don't know what happened on the latest update

Nightly 200608 06:00 (Build #21600606)
45.0.20200607130045, 995dd7b93
GV: 79.0a1-20200606094603
AS: 60.0.0

(on Monday 6/8 @ 6:05 AM), but darkreader no longer works.
and trying to load it, only produces:

---

(before you blame my vpn (that 🗝 in the top row)
1, Blokada isn't reporting any blocks (related to dark reader), and b, why would dark reader need to access some spammy site to turn this very site here black?)

[serovar]

This is not the right place for reporting Dark Reader issues, please see here.

[igalic]

@serovar, yes, but it's also important to mention here, since it's the recommended way of solving the problem this issue is about.
so i think it's important to remind us that a builtin solution might not fail so easily.

[garrett]

@igalic: Is the add-on actually the recommended way of solving the problem? I thought it is just a stopgap solution until it's addressed at the browser level? (Regardless, hopefully it's fixed via that other issue.)

[serovar]

Vivaldi just added this feature too.