1402312 - Provide option to make newtab page dark

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P1)

Description

[(inactive) Nihanth Subramanya [:nhnt11]]

As per spec: http://design.firefox.com/people/shorlander/photon/Mockups/macOS.html

Comment 1

[Dão Gottwald [:dao]]

<dao> I don't really think this bug makes sense though
<dao> the dark theme doesn't affect web content
<dao> it's not clear why it should affect the new tab page

Comment 2

[Dão Gottwald [:dao]]

<shorlander> @nhnt11 Yeah, I like it! We should definitely make all our surface areas match the theme.
<shorlander> In-content UI like New Tab (AS), Prefs, etc. isn't really web content. It's still our UI surface just in the content area.
<dao> shorlander: that's inconsistent with how we've treated in-content UI in the past. e.g. we ignored OS themes there whereas we wouldn't do that in the main UI, specifically because we made a chrome / content distinction rather than a UI / web content distinction.
<dao> shorlander: from a users perspective, since the new tab page is transient and users will always load web content from there, making this page black when most web content uses a light background that seems unnecessarily jarring.

Comment 4

[Jeff Griffiths (:canuckistani) (:⚡︎)]

I think there's a valid use case for styling the browser dark, including AS. I think the arguments made here are credible:

https://www.reddit.com/r/firefox/comments/75y9ii/menus_are_blindingly_white_in_the_dark_theme/

> <dao> shorlander: from a users perspective, since the new tab page is
> transient and users will always load web content from there, making this
> page black when most web content uses a light background that seems
> unnecessarily jarring.

In particular, as a user who switched to a dark theme so that my eyes are exposed to less white light in the evening, it's jarring to open newtab or home and get a flash of white. Most users will not enable the dark theme, so we can reason that the ones that do are in search of, er, *darkness*.

Needinfo'ing Jared who has a patch for other parts of the UI in progress in bug 1408121.

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

Thanks, it's probably best for the AS team to pick this up since they know their way around their codebase a bit better. I can help with getting the colors pushed down to content (I have to do something similar for bug 1385518).

khudson, would this be something that you could pick up?

Comment 6

[Dão Gottwald [:dao]]

(In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #4)
> In particular, as a user who switched to a dark theme so that my eyes are
> exposed to less white light in the evening, it's jarring to open newtab or
> home and get a flash of white. Most users will not enable the dark theme, so
> we can reason that the ones that do are in search of, er, *darkness*.

Sure, these users want darkness, but your use case seems to focus only on part of normal user workflow, and your conclusion seems backwards. The new tab page is transient and short-lived by nature; we don't expect users to spend much time on this page. Before opening a new tab, users will probably see bright web content, and they will likely get bright web content again when leaving about:newtab, so making this page dark will most of the time add two flashes rather than removing one.

Comment 7

[(inactive) Nihanth Subramanya [:nhnt11]]

(In reply to Dão Gottwald [::dao] from comment #6)
> (In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #4)
> > In particular, as a user who switched to a dark theme so that my eyes are
> > exposed to less white light in the evening, it's jarring to open newtab or
> > home and get a flash of white. Most users will not enable the dark theme, so
> > we can reason that the ones that do are in search of, er, *darkness*.
> 
> Sure, these users want darkness, but your use case seems to focus only on
> part of normal user workflow, and your conclusion seems backwards. The new
> tab page is transient and short-lived by nature; we don't expect users to
> spend much time on this page. Before opening a new tab, users will probably
> see bright web content, and they will likely get bright web content again
> when leaving about:newtab, so making this page dark will most of the time
> add two flashes rather than removing one.

I filed this bug, but this is a great point. I concur.

Comment 8

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(In reply to Dão Gottwald [::dao] from comment #6)
> (In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #4)
> > In particular, as a user who switched to a dark theme so that my eyes are
> > exposed to less white light in the evening, it's jarring to open newtab or
> > home and get a flash of white. Most users will not enable the dark theme, so
> > we can reason that the ones that do are in search of, er, *darkness*.
> 
> Sure, these users want darkness, but your use case seems to focus only on
> part of normal user workflow, and your conclusion seems backwards. The new
> tab page is transient and short-lived by nature; we don't expect users to
> spend much time on this page. Before opening a new tab, users will probably
> see bright web content, and they will likely get bright web content again
> when leaving about:newtab, so making this page dark will most of the time
> add two flashes rather than removing one.

We don't have control over what the web content is like that users view, so for me that is out of scope of this discussion. I agree I am focusing on only part of the user flow but it's the part we have control over.

What is in scope is what we set as the background colour to in our UI. Newtab is the biggest piece of UI we now use, and it is hard-coded to be bright. I have user intent from people who choose the dark theme, it seems reasonable to me that a dark theme be mostly, er, dark. Similarly, we also think it might be nice to be able to set the background of newtab to an image. The user would do this themselves so we have user intent, similar to selecting the dark theme over the default. 

To me, this is about user control and customization. If the user wants dark let's give it to them.

Comment 9

[(inactive) Nihanth Subramanya [:nhnt11]]

(In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #8)
> (In reply to Dão Gottwald [::dao] from comment #6)
> > (In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #4)
> We don't have control over what the web content is like that users view, so
> for me that is out of scope of this discussion. I agree I am focusing on
> only part of the user flow but it's the part we have control over.

We don't have control, but we could get data on this: for example, what percentage of the most visited websites are "bright"?

> What is in scope is what we set as the background colour to in our UI.
> Newtab is the biggest piece of UI we now use, and it is hard-coded to be
> bright. I have user intent from people who choose the dark theme, it seems
> reasonable to me that a dark theme be mostly, er, dark. Similarly, we also
> think it might be nice to be able to set the background of newtab to an
> image. The user would do this themselves so we have user intent, similar to
> selecting the dark theme over the default. 
> 
> To me, this is about user control and customization. If the user wants dark
> let's give it to them.

I've had users tell me they think a dark newtab page would be cool or that they'd like it, but I don't think anyone has actually considered what the experience would be like. I think Dão makes a really good point about the newtab page usually serving a transient purpose and how a dark one would result in a bright->dark->bright transition, and it's not something the average user would think about off the top of their head without trying it.

According to me, from a sheer theoretical design PoV, bright newtab page is the way to go. If we want to make the decision based on what users want, simply going by the word of the small subset of users that a) we interact with and b) think a dark newtab page would be nice without actually trying it, seems like the wrong way to go. We'd be risking a) the subset of users we interacted with hold an unpopular opinion and b) turns out that once they try it, they run into the issue Dao pointed out and decide it's not such a good idea after all.

So, I think the decision process for this bug is:

1. Do we want to invest resources into conducting some sort of user testing for this?
2. If not, are we okay with the risks?
3. If not, do we want to offer a dark newtab page as an option independent of the dark theme, for the sake of customization?

Hopefully I'm making sense :)

Comment 10

[Mehmet]

The most annoying issue on Chrome was the white flashing before the dark backgrounds rendered on the NTP or New Incognito Page. It would be nice, if this kind of "white flashing" can be avoided, if you plan to introduce a dark NTP. Thank you.

Comment 11

[John Doe]

I think comment 8 makes a pretty good point, also before anyone starts analysing the amount of bright web pages on the net I just want to point out that add-ons like these exist:

https://addons.mozilla.org/en-US/firefox/addon/owl/

https://addons.mozilla.org/en-US/firefox/addon/dark-mode-webextension/

That said having a separate option for enabling it might be a good idea, like a toggle in the New Tab Preferences.

Comment 12

[Dão Gottwald [:dao]]

(In reply to John Doe from comment #11)
> I think comment 8 makes a pretty good point, also before anyone starts
> analysing the amount of bright web pages on the net I just want to point out
> that add-ons like these exist:
> 
> https://addons.mozilla.org/en-US/firefox/addon/owl/
> 
> https://addons.mozilla.org/en-US/firefox/addon/dark-mode-webextension/

That's cool but we can't expect the average Dark theme user to install such an add-on, so we need to take into account what the UX is going to be for these common users.

Comment 13

[khagaroth]

(In reply to Dão Gottwald [::dao] from comment #12)
> That's cool but we can't expect the average Dark theme user to install such
> an add-on
I can assure you that you can expect that, it would be pointless to select a dark theme otherwise. And if you really want to push the "in-content UI is content" argument, then make it actually behave like content, so that we can use the extensions to make it dark our self, instead of heaving to beg you to fix your misguided UX decisions.

Comment 14

[Zibi Braniecki [:zbraniecki][:gandalf]]

> I think Dão makes a really good point about the newtab page usually serving a transient purpose and how a dark one would result in a bright->dark->bright transition

I'm not sure if I follow the logic. Users who actively seek dark themes do so in multiple places. I know it's anecdotal but I do have my search engine (ddg), amazon, twitter etc. all set to dark.
In result I actually do expect a "dark->dark" transition (I'm not sure where did you get the first bright in your flow).

I'm ok setting the new tab dark/bright separately (or actually, I'd expect it to follow my Fx theme by default with maybe an option in AS settings to override it), but I am not ok not being able to set it at all.

Comment 15

[maxm]

All this discussion is small part of bigger problem which is limiting UI customisation by removing Full Themes theming capabilities. Theming API should be massively bigger then evryone could change dark theme as they like and make UX very personal.

Comment 16

[Stefano Cecere]

since many sites are allowing dark themes (see Twitter, DuckDuckGo..) and even the new Pocket Home Page for Chrome has that option (see the screenshot https://github.com/mozilla/activity-stream/issues/3576 )

i don't think it's useful to discuss about the "light flow", but where to put this option: in the theme itself or in the Activity Stream plugin? i would say the latter.. since we have already several options and doesn't need to bother external development.. and Chrome new Page already works like that really well.

what do you think?

Comment 17

[Ed Lee :Mardak]

Bug 1347204 is maybe a more general fix with a webextension theme api?

Comment 20

[Stefano Cecere]

i think that the "dark theme" option in the "Pocket new tab" extension for Chrome (https://chrome.google.com/webstore/detail/pocket-new-tab/mlnnopicjonfamklpcdfnbcomdlopmof developed by Pocket itself <- Mozilla ) is the best and fastest solution.

sounds odd that Chrome has a better "activity stream like" extension than Firefox! :)

Comment 21

[Storm]

The fact that Firefox cannot handle dark desktop themes was reported many times FOR SEVENTEEN YEARS.

Seventeen years. And still an issue.

Webpages display partly in system colors causing white on white or black on black text/form elements, while parts of the Firefox UI defy every dark theme and stay eye-bruning white.

I hoped that finally Quantum will fix this... but it MADE IT WORSE!

Now several parts of the FF GUI have white on white checkboxes or disabled text, and everything in settings is blazing white as well as new tab page.


All you need to do to fix the websites is to use the widespread defaults instead of system colors to render webpages.

color:black;
background-color:white;

DONE.

But you can't do this for 17 years for reasons beyond comprehension.

WORKS in Chrome (USES GTK TOO!)
WORKS in Internet Explorer
WORKS in Microsoft Edge
WORKS in pretty much EVERYTHING other than Firefox.


Just a few tickets about problems with dark themes, in order:

https://bugzilla.mozilla.org/show_bug.cgi?id=70315 <--- 17 years old report!!! Still "New"!
https://bugzilla.mozilla.org/show_bug.cgi?id=1195138
https://bugzilla.mozilla.org/show_bug.cgi?id=1268338
https://bugzilla.mozilla.org/show_bug.cgi?id=1283086
https://bugzilla.mozilla.org/show_bug.cgi?id=1379725
https://bugzilla.mozilla.org/show_bug.cgi?id=1385518
https://bugzilla.mozilla.org/show_bug.cgi?id=1391007
https://bugzilla.mozilla.org/show_bug.cgi?id=1393927
https://bugzilla.mozilla.org/show_bug.cgi?id=1402312
https://bugzilla.mozilla.org/show_bug.cgi?id=1408121
https://bugzilla.mozilla.org/show_bug.cgi?id=1414693
https://bugzilla.mozilla.org/show_bug.cgi?id=1415511
https://bugzilla.mozilla.org/show_bug.cgi?id=1418090
https://bugzilla.mozilla.org/show_bug.cgi?id=1424422
https://bugzilla.mozilla.org/show_bug.cgi?id=1425161
https://bugzilla.mozilla.org/show_bug.cgi?id=1425517

Comment 24

[Dimitrios Apostolou]

While your argument that "the web has mostly light background" is true, I do everything in my power to have dark backgrounds:

- Install dark desktop theme
- Enable "Dark Theme by Mozilla" in Firefox
- Configure websites that offer the choice
- Use "Stylish" add-on for websites that do not offer the choice (Google, Slack, Github, JIRA etc). It's very easy to override the default style of a website with this, but I haven't been successful with about:newtab, the bright background seems non-overridable!

So most of my web experience is dark, but still, every time I open a new tab, I get a blinding flash.

Comment 25

[harogaston]

I agree with the last comments. The web is moving towards supporting dark themes/options. Most popular sites are doing it. So for users who try to save their eyes as much as possible please at least you have to give us the chance to choose.

Comment 26

[Dimitrios Apostolou]

Related is that the "dark theme" extensions that modify the style sheets of websites can't (don't have the right?) to modify the about:newtab or other internal Firefox web page. For example I installed the "Dark Background and Light Text" add-on from here: 

https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text

It works all over the web, but when I try about:newtab or about:preferences, the add-on can't change the light background and it displays the message: 

"Modification of this page is not available due to Firefox restrictions".

Comment 27

[Ricky Rosario [:rrosario, :r1cky]]

Mockups and spec are here: https://mozilla.invisionapp.com/share/H4FW3RYFXVK#/screens/279681634_New_Tab_Dark_Theme_Spec

Comment 28

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/4044

Comment 29

[[github robot]]

Commit pushed to master at https://github.com/mozilla/activity-stream

https://github.com/mozilla/activity-stream/commit/997f4224179116ee142684b7d6af2e5dbe42b52e
Fix Bug 1402312 - Implement dark theme

Comment 30

[Dão Gottwald [:dao]]

Ed, where was it decided to disregard the issue of most web content having a bright background, and that we can't assume that the majority of users choosing the dark theme will jump through extra hoops to make web content dark? This will result in jarring bright -> dark -> bright changes when going from web content to about:newtab to web content. To address this I was assuming that we were going to provide an option here rather than making about:newtab dark automatically.

Comment 31

[khagaroth]

Sheesh, drop it already, it's called a dark theme for a reason. Even if it was a problem (which it isn't), it's much less jarring than going dark -> screaming bright -> dark.

Comment 32

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [::dao] from comment #30)
> we can't assume that the majority of users
> choosing the dark theme will jump through extra hoops to make web content
> dark

I think this is common knowledge among us engineers, but let me expand on this for clarity: We know that most users don't go to length to install any add-ons whatsoever. We have data on this. We can't directly project that onto the subset of users enabling the dark theme, but it still seems clear to me that a few vocal users pledging in bugzilla that they'll do everything they can to make web content dark aren't representative of the affected user base.

Comment 33

[Aaron Benson]

Hey Dao - it seemed that there was a lot of feedback to the contrary (see Comment 4) which provided much of the basis for making the new tab theme align with the browser theme. The new tab surface is an in-content experience native to the browser and isn't considered web content. Because of this, it's reasonable that new tab would align with the browser theme as much as possible.

Comment 34

[Ed Lee :Mardak]

In reviewing the PR, it was noted that after bug 1444459, our implementation will likely change quite a bit to allow custom theme values instead of inferring darkness based on the text color. Where theoretically with more precise theming, there could be a theme that provides dark browser chrome and light browser content.

But I suppose simpler than that is setting browser.newtabpage.activity-stream.feeds.theme (about:config only) to false.

Comment 35

[Dão Gottwald [:dao]]

(In reply to Aaron Benson from comment #33)
> Hey Dao - it seemed that there was a lot of feedback to the contrary (see
> Comment 4) which provided much of the basis for making the new tab theme
> align with the browser theme.

Vocal users aren't representative, and they likely also didn't consider the broader consequences. Nihanth who filed this bug changed his mind as we discussed this.

> The new tab surface is an in-content
> experience native to the browser and isn't considered web content. Because
> of this, it's reasonable that new tab would align with the browser theme as
> much as possible.

Sure, I see why people would expect that, but this doesn't really address the implied UX regression.

Comment 36

[bbell]

(In reply to Dão Gottwald [::dao] from comment #35)
> Sure, I see why people would expect that, but this doesn't really address
> the implied UX regression.

I don't understand the implied UX Regression.

We have a signal from the user that they desire a dark theme. We deliver to the user an application that is dark. Initially, this was limited to just the browser chrome due to time constraints, however, we are completing this work by making sure menus and search results are now dark as well. The next steps are to also darken the in-content UI surfaces like Preferences and the New Tab. In-content UI, while made with web-tech, are not considered web pages but instead Application UI, and therefore should be dark.

Comment 37

[Dão Gottwald [:dao]]

(In reply to bbell from comment #36)
> (In reply to Dão Gottwald [::dao] from comment #35)
> > Sure, I see why people would expect that, but this doesn't really address
> > the implied UX regression.
> 
> I don't understand the implied UX Regression.
> 
> We have a signal from the user that they desire a dark theme. We deliver to
> the user an application that is dark. Initially, this was limited to just
> the browser chrome due to time constraints, however, we are completing this
> work by making sure menus and search results are now dark as well. The next
> steps are to also darken the in-content UI surfaces like Preferences and the
> New Tab. In-content UI, while made with web-tech, are not considered web
> pages but instead Application UI, and therefore should be dark.

Sorry, but you're just expanding on the point that was never disputed while saying nothing about the UX concern.

That concern follows the same argument made by those vocal users who installed an add-on to make web content dark. Add-ons don't have access to about:newtab, so in that setting about:newtab being bright is the exception and perceived as disruptive. For this perception it doesn't really matter whether about:newtab is UI or web content. We automatically show about:newtab as a transient page between loading web content, which makes it quite different from e.g. about:preferences that average users open once in a blue moon.

If we take that argument seriously -- and I think we should, while recognizing that these users aren't a qualified majority -- then this goes both ways, and we need to consider the real-world effect for users who won't install such an add-on.

Comment 38

[Aaron Benson]

If the concern is that by changing the theme to a dark background color on new tab that we are somehow creating a jarring experience for users, then I don't see how that stands to reason when web page backgrounds are variable. We should do as Bryan says and respect the choice of people's preference for a dark UI where at all possible. 

Dao, it seems clear you don't agree, however, we have feedback from Product and Design endorsing this feature (see Comment 8 and Comment 2) so I think we can move ahead. 

FWIW, the dark new tab theme landed in Nightly today and I think it looks great :)

Comment 39

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/5dc20e8d5f71

Comment 40

[sidneys.github.io]

Thank you guys for implementing this feature, i was using a custom local UserContent.css to as a workaround before.

As a user, i also strongly support the paradigm that views regarded as "Application UI" (such as Activity Stream, Preferences etc.) should follow the general color theme as far as possible.

Comment 41

[Dão Gottwald [:dao]]

(In reply to Aaron Benson from comment #38)
> If the concern is that by changing the theme to a dark background color on
> new tab that we are somehow creating a jarring experience for users,

Yes, that's the issue.

> then I
> don't see how that stands to reason when web page backgrounds are variable.

Variable on principle, most of the time light in reality. Is this somehow disputed? Why are you insisting on abstract principles (this is UI, that is web content; web page backgrounds are variable) but refusing to discuss the real-world effect?

Comment 42

[Andreea Cupsa [:acupsa], Experiments QA]

Build ID: 20180404100127
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0

I have verified that opening a new tab page, while the browser's dark theme is enabled, the new tab page displays a dark background with white text as specified in the mock-ups. This check was done on Windows 10 x64, Arch Linux and Mac 10.13.3 with the latest Nightly build (61.0a1) installed.

Comment 43

[Qwerty]

What about about:blank? It's still white in Nightly with dark theme and often produces flashes when creating new tabs or before content loads.
Bug 1408122 is marked as duplicate of this bug, but here was only work one newtab by activity stream, as I see. Can you make blank page dark too? It will hopefully fix problem for many users that complain about white flashes.

Comment 44

[seansfkelley+mozilla]

The white about:blank and about:newtab pages are quite blinding when using the dark theme and I open them very frequently so I get plenty of white flashes. I'm loving this new dark theme but those two pages not having dark modes is a real bummer.

Comment 45

[signupemail]

• I am confident that many users would like the inbuilt dark theme to apply to the new tab page and to the home page. After all, (1) it is inconsistent for a dark theme not to do that, and (2) the user sees those pages a lot.

• An extension can 'darkify' the new tab page but darkifying about:blank is harder for the user.

• It will tend to be technical users that want this 'darkness' the most.

The above make it hard to understand why Mozilla does not implement the feature.