White Android navigation bar is too distractive on dark-themed sites
Reported by
bcl...@gmail.com,
Dec 24 2017
|
||||||||
Issue descriptionSteps 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:
,
Dec 26 2017
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!!
,
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/
,
Dec 26 2017
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
,
Dec 27 2017
Adding appropriate component's and CC'ing @ktam for further triaging of the issue. Thanks!!
,
Dec 28 2017
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.
,
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.
,
Jan 24 2018
PS: is there some option or flag I can use to revert back to a black navigation bar?
,
Jan 24 2018
,
Jan 24 2018
> 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.
,
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?
,
Jan 24 2018
> 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).
,
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.
,
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? :)
,
Jan 26 2018
,
Jan 29 2018
Issue 806516 has been merged into this issue.
,
Jan 31 2018
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
,
Feb 2 2018
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!
,
Feb 2 2018
,
Feb 8 2018
Issue 810114 has been merged into this issue.
,
Feb 15 2018
,
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/
,
May 10 2018
,
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.
,
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.
,
Jun 7 2018
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.
,
Jun 7 2018
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.
,
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.
,
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.
,
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
,
Jun 8 2018
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.
,
Jun 8 2018
If nothing else it would be great if it could at least switch the dark one when Night Mode is enabled.
,
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".
,
Jul 6
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.
,
Jul 6
@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?
,
Jul 9
+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.
,
Jul 9
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.
,
Aug 28
What's the status on this? It's been nearly three months and the white's still blinding and awkward on dark sites
,
Oct 10
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.
,
Oct 24
Seriously, can someone at least makes it black when Android pie is in dark theme???
,
Jan 3
Attaching a patch that reverts the white Navigation Bar to black. Screenshots attached as well |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by pnangunoori@chromium.org
, Dec 26 2017