Provide option to make newtab page dark

VERIFIED FIXED in Firefox 61

Status

()

defect
P1
normal
VERIFIED FIXED
2 years ago
4 months ago

People

(Reporter: nhnt11, Assigned: rrosario)

Tracking

(Depends on 2 bugs, Blocks 2 bugs)

Trunk
Firefox 61
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox57 wontfix, firefox58 wontfix, firefox60 wontfix, firefox61 verified)

Details

(Whiteboard: [AS61MVP] [ThemeCust-MVP])

Attachments

(1 attachment)

<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
No longer blocks: photon-visual
Component: Theme → Activity Streams: Newtab
Whiteboard: [photon-visual][triage]
<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.
Duplicate of this bug: 1408122
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.
Flags: needinfo?(jaws)
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?
Flags: needinfo?(jaws) → needinfo?(khudson)
(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.
Flags: needinfo?(jgriffiths)
Reporter

Comment 7

2 years ago
(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.
(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.
Flags: needinfo?(jgriffiths)
Reporter

Comment 9

2 years ago
(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

2 years ago
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

2 years ago
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.
(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

2 years ago
(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.
Priority: -- → P3
> 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

2 years ago
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

2 years ago
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

2 years ago
Bug 1347204 is maybe a more general fix with a webextension theme api?
See Also: → 1347204
Duplicate of this bug: 1423812

Updated

a year ago
Duplicate of this bug: 1424964

Comment 20

a year ago
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 hidden (advocacy)

Updated

a year ago
Duplicate of this bug: 1429351
Duplicate of this bug: 1431615
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.

Updated

a year ago
Iteration: --- → 60.3 - Feb 26
Priority: P3 → P2
Whiteboard: [AS60MVP]
Summary: Use dark background for newtab page when the dark theme is enabled → Provide option to make newtab page dark
Iteration: 60.3 - Feb 26 → 61.1 - Mar 26
Whiteboard: [AS60MVP] → [AS61MVP]

Updated

a year ago
Blocks: 1437659

Comment 25

a year ago
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.

Updated

a year ago
Priority: P2 → P3
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".
Assignee: nobody → rrosario
Priority: P3 → P1
Whiteboard: [AS61MVP] → [AS61MVP] [ThemeCust-MVP]

Updated

a year ago
Blocks: 1444980

Updated

a year ago
Severity: normal → enhancement
Iteration: 61.1 - Mar 26 → 61.2 - Apr 9
Blocks: 1449653
Blocks: 1449651

Updated

a year ago
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED

Updated

a year ago
Blocks: 1449792
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.
Flags: needinfo?(edilee)
Comment hidden (admin-reviewed)
(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

a year ago
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

a year ago
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.
Flags: needinfo?(edilee)
See Also: → 1444459
(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

a year ago
(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.
(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

a year ago
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 hidden (metoo)
(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?
Flags: needinfo?(abenson)
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.
Status: RESOLVED → VERIFIED
Depends on: 1454717

Updated

a year ago
Flags: needinfo?(abenson)

Comment 43

11 months ago
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.

Updated

11 months ago
Depends on: 1471402
Depends on: 1488384
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.

Updated

6 months ago
Depends on: 1408122

Updated

6 months ago
Depends on: 1510567
No longer depends on: 1488384
See Also: → 1488384
You need to log in before you can comment on or make changes to this bug.