New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 797527 link

Starred by 22 users

Issue metadata

Status: Assigned
Owner:
Last visit > 30 days ago
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Feature



Sign in to add a comment

White Android navigation bar is too distractive on dark-themed sites

Reported by bcl...@gmail.com, Dec 24 2017

Issue description

Steps to reproduce the problem:
Use dark-themed site in Chrome >= 64

What is the expected behavior?
Intelligent color inverse, or use "theme-color" meta, or additional settings for site authors.

What went wrong?
Subj and attached screenshots explain it.

Did this work before? Yes 63

Does this work in other browsers? N/A

Chrome version: 64.0.3282.29  Channel: beta
OS Version: 8.1
Flash Version:
 
Labels: Needs-triage-Mobile
Cc: sandeepkumars@chromium.org
Components: UI
Labels: Triaged-Mobile Needs-Feedback
Tested the issue using #64.0.3282.29 in Android Pixel XL 8.1.0/OPM2.171019.012. Please follow the below steps to go back to the old OmniBox.

Steps:
1. Launch Browser
2. Navigate to Chrome://flags
3. Search for home and disable chrome-home and relaunch
4. You'll be navigated to the old OmniBox

@bclexa: Bottom OmniBox is a new feature introduced recently, please follow the above steps if you want old UI and let us know the update.

Thanks!!


Comment 3 by bcl...@gmail.com, Dec 26 2017

The issue is not only with the new OmniBox. The "1.png" picture is made with disabled chrome-home, and the nav bar is white.

Also described and discussed at http://www.androidpolice.com/2017/12/07/google-switches-white-nav-bar-chrome-65-canary-google-photos/
Project Member

Comment 4 by sheriffbot@chromium.org, Dec 26 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "sandeepkumars@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Cc: k...@chromium.org
Components: -UI UI>Browser>Omnibox>ZeroSuggest UI>Browser>Mobile>NavPanel
Labels: M-65
Status: Untriaged (was: Unconfirmed)
Adding appropriate component's and CC'ing @ktam for further triaging of the issue.

Thanks!!

Comment 6 by k...@chromium.org, Dec 28 2017

Cc: twelling...@chromium.org hannahs@chromium.org
Owner: hannahs@chromium.org
Status: Assigned (was: Untriaged)
Thanks for the feedback. I agree that we may be able to do something better here though as a first iteration, it is working as intended. However, re-assigning to Hannah in case there's any additional thoughts.

Comment 7 by chem...@gmail.com, Jan 24 2018

As a web developer who does extra work to provide dark themes based on time of day I'm very unpleasantly surprised by the switch to a white navigation bar. It's super distracting when used on sites with dark themes, hurts eyes when using the device in the dark, uses more battery on AMOLED, and frankly, just looks awful.

It's even worse when I open a "standalone" PWA.

Black is (fairly) neutral and "fades into the background". White isn't and doesn't. I feel like my work as a designer is being undermined :(

Maybe give web developers an option to change the color via the themecolor option and/or app manifest?

I've recently opened an issue to support theming the statusbar and suggested doing the same for the navigation bar. This could be a solution for this?

See issue #801474
https://bugs.chromium.org/p/chromium/issues/detail?id=801474

PS: I may sound a bit emotional about this. I am. Sorry about that.

Comment 8 by chem...@gmail.com, Jan 24 2018

PS: is there some option or flag I can use to revert back to a black navigation bar?
Components: -UI>Browser>Mobile>NavPanel -UI>Browser>Omnibox>ZeroSuggest UI>Browser>Themes
Labels: -Type-Bug-Regression Type-Feature
> Maybe give web developers an option to change the color via the themecolor option and/or app manifest?

Allowing PWA's to specify the bottom navigation bar color is an interesting proposal. 

The bottom navigation bar color currently matches and blends well with Chrome's bottom UI (2.png in the original bug report). Our full UX spec/proposal needs to consider that, as well as how it looks and feels when the bottom UI is hidden or gone.


> PS: is there some option or flag I can use to revert back to a black navigation bar?

No, there is no flag or option to change the navigation bar in Chrome. The navigation bar color is set in XML read at Activity creation. We do not currently support programatically changing the navigation bar color during runtime.

Comment 11 by chem...@gmail.com, Jan 24 2018

> The bottom navigation bar color currently matches and blends well with Chrome's bottom UI (2.png in the original bug report)

But how does that look when the Chrome UI is themed? Then you'd have (for example) a MD deep-orange Chrome UI bar on top of a white navigation bar?

Or does the UI ignore the theme color when bottom UI is enabled?
> But how does that look when the Chrome UI is themed? Then you'd have (for example) a MD deep-orange Chrome UI bar on top of a white navigation bar?

The bottom Chrome UI is always white (it doesn't get themed).

Comment 13 by chem...@gmail.com, Jan 24 2018

> The bottom Chrome UI is always white (it doesn't get themed).

Okay that seems like a regression to me but.. I don't like the bottom UI to begin with. It's a problem designers need to solve because people buy phones they can't use with one hand and then they complain about it. Anyway. I'm digressing. 

I do appreciate you're looking at solutions and giving developers more control and having PWA's behave more like native apps is awesome :)

I just hope this doesn't take too long, as you can see in the screenshots I've attached the white UI bar draws so much attention the primary element in my UI suddenly is the least prominent. I find myself having to redesign around something one browser does and that feels like I'm back in the the 90's/00's ;)

Having a white nav bar may make sense when you control the entire UI but for a browser, which should get out of the way as much as possible, it's a controversial decision IMO.


idonteven.jpg
291 KB View Download

Comment 14 by chem...@gmail.com, Jan 24 2018

> The bottom navigation bar color currently matches and blends well with Chrome's bottom UI (2.png in the original bug report). Our full UX spec/proposal needs to consider that, as well as how it looks and feels when the bottom UI is hidden or gone.

Reading this again I understand that applying the theme is a lot more complicated when the Chrome UI is visible.

But as you said:

> Allowing PWA's to specify the bottom navigation bar color is an interesting proposal.

It would be great if we can control it in PWA's where the Chrome UI is not visible. Which should make the feature a lot easier to get through the UX spec/proposal thingie? :)
Cc: cma...@chromium.org tedc...@chromium.org
 Issue 806096  has been merged into this issue.
 Issue 806516  has been merged into this issue.
This makes dark websites uncomfortable to read, since the nav bar will be the only bright part on the screen. The white top UI disappears after scrolling down, which previously meant that the entire screen would be dark/low-contrast. (Also, the top UI is themable by e.g. GitHub), so it can be darkened if necessary.)

A black nav bar works with any content and is the system default, but a white nav bar looks bad on dark content. The bug explaining the change isn't publicly visible, so I don't understand the reasoning: issue #778736 
I'm currently in the awkwardness of picture 1
Address bar is on top, and is the dull grey chrome color, while the bottom bar has suddenly turned a permanent glaring white, instead of the previous transparent one.

When this changes into picture 2, will the address bar auto-hide like it used to do?
I would sure hope so, as this make the box huge!
Cc: stefanvirtanen@google.com
Issue 810114 has been merged into this issue.

Comment 21 by k...@chromium.org, Feb 15 2018

Cc: -k...@chromium.org

Comment 22 by chem...@gmail.com, Feb 16 2018

Sooo. I guess the bottom UI is going away so that white navbar really has no excuse to be there anymore, does it? ;)

https://www.androidpolice.com/2018/02/16/experimental-chrome-home-interface-now-chrome-duplex-address-bar-back-top/
Cc: mdjones@chromium.org
 Issue 841674  has been merged into this issue.

Comment 24 by g...@greggman.com, Jun 7 2018

> No, there is no flag or option to change the navigation bar in Chrome. The navigation bar color is set in XML read at Activity creation. We do not currently support programatically changing the navigation bar color during runtime.

Are you sure this is the case. Open an incognito window and you'll get a black navigation bar. Close all tabs and you'll get a black navigation bar as well.


Comment 25 by g...@greggman.com, Jun 7 2018

Also on the new tab page, the navigation bar is white but the moment you click the search text area it turns black.
Since the original comment, we have update the navigation bar color controller to use black in the tab switcher and in incognito mode. There is no way for users to configure the color, however.
Re #25 - the Android system change the navigation bar color back to black while the keyboard is showing. This is, as far as I know, something that apps cannot override.

Comment 28 by g...@greggman.com, Jun 8 2018

A suggestion though, I'm not advocating to be able to select any color. 2 would be okay, dark or light, black or white. Clearly it seems like Chrome is able to switch. It could possible look at for the  <meta name="theme-color" content="#??????"> and choose dark or light based on that. Or add a new meta tag <meta name="theme-base" content="dark">

Just throwing out ideas because as it is, as others have pointed out, it kind of ruins any dark sites or dark themed apps as it becomes the brightest most distracting thing on the screen so hoping for a solution. 

Comment 29 by chem...@gmail.com, Jun 8 2018

#c28: i disagree. I think we should be able to control statusbar, toolbar and navbar separately. Having Chrome decide it will cause unwanted results for some. Then they have to change the theme color just because they have a "light" theme color but a dark website.

Btw, it's "fixed" for PWA's in v66. When opening a standalone web app it uses the black navbar.

Comment 30 by g...@greggman.com, Jun 8 2018

#c29. Could you clarify what you disagree with what?

You disagree that chrome should choose based on the theme color?

You disagree that chrome should offer 2 options "light" and "dark" or "black" and "white"?

According to #c10 it can not be set to any color, they have to choose N colors at build time. So if that's true then it seems like being able to choose "light" or "dark" is better than not being able to choose at all.

iIf it turns out you actually can set any color at runtime then personally I'd be happy if <meta name"theme-color" ...> set the colors for both top and bottom. It does say "theme" after all, not "top".

https://developer.android.com/reference/android/view/Window.html#attr_android:navigationBarColor

Since bottom navigation has been removed, and this is a usability regression, shouldn't it be relatively simple to revert the code to the previous behavior?

Adding configuration options (either user or html) is a separate issue.
If nothing else it would be great if it could at least switch the dark one when Night Mode is enabled.

Comment 33 by chem...@gmail.com, Jun 8 2018

#c30:

> You disagree that chrome should offer 2 options "light" and "dark" or "black" and "white"?

I disagree that "light" and "dark" should be based on the theme color. Giving developers a *separate* meta-tag that allows them to choose would be something I'd welcome :)

> According to #c10 it can not be set to any color, they have to choose N colors at build time. So if that's true then it seems like being able to choose "light" or "dark" is better than not being able to choose at all.

From what I understood, this is how Chrome currently implements it. Android allows to set the theme color during runtime (that's what Chrome does when a site changes the theme color) so I can't imagine that this wouldn't work for the navigation bar. That said, it's Android and there are plenty of examples of weird inconsistencies that, according to Google, "work as intended".
Now after latest update of chrome android, all sites including google which have white background, turns notification bar colour to white. But the text in notification bar is also in white colour which makes texts invisible. See screenshot.
Screenshot_2018-07-06-13-26-15-185.jpeg
134 KB View Download
@C34: That's probably because your device manufacturer forgot to supply dark icons..? In fact, I think Android should take care of inverting the icons.

Which device and version of android are you running?
+mdjones@ for comment #34

We are aware of some manufacturers that do not fully support dark icons. We've created a device/OS version blacklist in https://chromium-review.googlesource.com/c/chromium/src/+/1111263

sebinfrancisara@ - if you supply your device type and OS version, we can try to reproduce and update the blacklist if needed.
It looks like that manufacturer is using their own rules for how certain icons should be tinted (or in this case not tinted) since the vibrate icon and time are the correct colors. This is definitely a candidate for the theme blacklist.

Comment 38 Deleted

What's the status on this? It's been nearly three months and the white's still blinding and awkward on dark sites
This is still an issue, and I think Chrome is the single app I have where it's such a big issue.
Chrome even forces the status bar to be white, while virtually all other of my apps has it the very least in an off shade, but generally a fairly dark color.

At least eg. Google Maps use a shade of off-white / light grey for the bottom bar, instead of the brilliant white that Chrome uses.

Can we please, please adjust these colors?
Android finally has a dark theme, and night lights and everything, but Chrome lags behind. I now actively avoid using Chrome at night because it's so bright even on a dark page, with brightness set to 0 and night light on.
Seriously, can someone at least makes it black when Android pie is in dark theme???
Attaching a patch that reverts the white Navigation Bar to black. Screenshots attached as well
Dark-Navbar.patch
3.3 KB Download
50607570-a99d0000-0e97-11e9-9848-9c8929961338.png
99 KB View Download
50607577-aefa4a80-0e97-11e9-972c-95c0043f5176.png
111 KB View Download
50607587-b28dd180-0e97-11e9-90bd-bb4eb76d2dfd.png
206 KB View Download

Sign in to add a comment