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

Issue 850098 link

Starred by 90 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 1
Type: Bug

Blocking:
issue 893598


Show other hotlists

Hotlists containing this issue:
Hotlist-1


Sign in to add a comment

mac: support macOS 10.14 dark mode

Project Member Reported by ellyjo...@chromium.org, Jun 6

Issue description

macOS 10.14 introduced "dark mode", which swaps the system color palette to a dark scheme. Chrome doesn't currently support this. We need to:

1) Figure out how dark mode should look in the Refresh look
2) Implement it
 
There's also the related  issue 850103  with menu text.
Labels: -Proj-Mac1014 Proj-MacMojave

Comment 3 Deleted

 Issue 857349  has been merged into this issue.
Cc: lgrey@chromium.org
Owner: bettes@chromium.org
Over to bettes@ for spec
Cc: dmazzoni@google.com lpalmaro@google.com
 Issue 861565  has been merged into this issue.
Labels: Proj-DesktopUI
Labels: Group-MacOS_Platform_Integration_and_Participation
Any chance to include this in M70?
Cc: -lgrey@chromium.org bettes@chromium.org
Labels: -Target-70 -M-70 Target-71 M-71
Owner: lgrey@chromium.org
Unfortunately, M70 just branched, but we should try to get it in for M71. I'll follow up with bettes@ offline.
I think the main concern here is how the dark mode for Mojave will be distinguishable from Incognito mode. Moreover, Chrome pages (such as New Tab Page, Settings, History, etc.) and maybe the submenus of Bookmark Bar and 3-dot menu should also support dark mode to fully support. 
Labels: Hotlist-MdRefreshDesignPolish
Labels: Hotlist-DesktopUITriaged
Project Member

Comment 15 by bugdroid1@chromium.org, Sep 28

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/749f93011fb4c15682844f7b14835f13fa2981da

commit 749f93011fb4c15682844f7b14835f13fa2981da
Author: Leonard Grey <lgrey@chromium.org>
Date: Fri Sep 28 16:21:40 2018

Add feature flag to allow dark mode if enabled on system or forced

Bug: 850098
Change-Id: Ib2af48ceb226bbe2650c65331d4bbec2321c0956
Reviewed-on: https://chromium-review.googlesource.com/1251328
Reviewed-by: Avi Drissman <avi@chromium.org>
Commit-Queue: Leonard Grey <lgrey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595113}
[modify] https://crrev.com/749f93011fb4c15682844f7b14835f13fa2981da/ui/base/ui_base_features.cc
[modify] https://crrev.com/749f93011fb4c15682844f7b14835f13fa2981da/ui/base/ui_base_features.h

Project Member

Comment 16 by bugdroid1@chromium.org, Oct 1

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/e833a26f3ba8939ba11254fec6beb6aaabb1dc59

commit e833a26f3ba8939ba11254fec6beb6aaabb1dc59
Author: Leonard Grey <lgrey@chromium.org>
Date: Mon Oct 01 20:07:01 2018

Fix comment in dark mode feature.

We don't want to require the feature to be on when *forcing*
dark mode.

Bug: 850098

Change-Id: Ie6a7f8e7a34e1436136664cf08db2015e69a790e
Reviewed-on: https://chromium-review.googlesource.com/1254862
Reviewed-by: Avi Drissman <avi@chromium.org>
Commit-Queue: Leonard Grey <lgrey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595532}
[modify] https://crrev.com/e833a26f3ba8939ba11254fec6beb6aaabb1dc59/ui/base/ui_base_features.h

Before the new dark mode, there was a problem with how browser actions looked in darker UI (mainly in Incognito mode, and when dark themes are used). And now, with the adding of the new dark mode, this problem will become more annoying for a lot more users.

For Incognito mode (which is currently dark), developers used to call `chrome.browserAction.setIcon()` for every tab and use a lighter browser action icon when the tab is in an incognito window.
But this workaround can't be used to deal with dark themes, nor with the 
new dark mode, because there is no clue if the current theme is light or dark, and whether Mojave's dark mode is turned on or off.

Now, if I want to talk about a possible solution here for all the previous cases, I think there has to be a way to determine if the current "theme" (be it a dark mode, incognito, or a custom theme) is light or dark. That will allow developers to choose the right icon and adapt to different themes/modes.

Also, I think extensions should be allowed to provide different icons for light and dark browser UI, and Chrome will automatically choose the proper icon.
Looks like there is already a Web Extensions proposal for something similar to what I suggested here. Check the property "theme_icons" here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action
It might be worth opening a new FR bug for the extension team for that proposal. It's out of scope for the current dark mode work (but it should be easy enough to integrate from the dark mode side if it's implemented on the extension side).
Cc: lgrey@chromium.org
 Issue 893115  has been merged into this issue.
Blocking: 893598
Could you please consider adding extensions API for detecting system or Chrome dark mode settings and subscribing for changes?
```
chrome.appearance.getCurrent(); // {mode: 'dark'} or 'default' or 'high-contrast'
chrome.appearance.onChange.addListener(({mode}) => console.log(mode === 'dark'));
```
This will not only help with switching app icon, but also will help toggling website appearance. This works for Safari https://youtu.be/3bP6Dq5cF0o?t=16
On lgrey's suggestion, I created a new issue for adding an extension api to allow having light and dark icons in extensions:
https://bugs.chromium.org/p/chromium/issues/detail?id=893175
Project Member

Comment 25 by bugdroid1@chromium.org, Oct 18

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/cc36e9449a8b44a8da86c0dc257c7f186a893053

commit cc36e9449a8b44a8da86c0dc257c7f186a893053
Author: Leonard Grey <lgrey@chromium.org>
Date: Thu Oct 18 20:20:32 2018

Use dark omnibox tint in dark mode

Bug: 850098
Change-Id: Ia9559f323ba5d8d7b74578c91a4fee0618d3bd53
Reviewed-on: https://chromium-review.googlesource.com/c/1288854
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Commit-Queue: Leonard Grey <lgrey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#600885}
[modify] https://crrev.com/cc36e9449a8b44a8da86c0dc257c7f186a893053/chrome/browser/ui/views/location_bar/location_bar_view.cc

 Issue 896902  has been merged into this issue.
Project Member

Comment 27 by bugdroid1@chromium.org, Oct 22

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/42a63522f3f83af5a2bfa126be5d02bfb27c617c

commit 42a63522f3f83af5a2bfa126be5d02bfb27c617c
Author: Leonard Grey <lgrey@chromium.org>
Date: Mon Oct 22 20:26:50 2018

Mac: dark backgrounds in dark mode for secondary UI/menus.

Bug: 850098
Change-Id: If6de5922311ba501c5a746d9228993b42eff0b60
Reviewed-on: https://chromium-review.googlesource.com/c/1291569
Commit-Queue: Leonard Grey <lgrey@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Reviewed-by: Michael Wasserman <msw@chromium.org>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#601709}
[modify] https://crrev.com/42a63522f3f83af5a2bfa126be5d02bfb27c617c/ui/native_theme/native_theme_mac.mm
[modify] https://crrev.com/42a63522f3f83af5a2bfa126be5d02bfb27c617c/ui/views/bubble/footnote_container_view.cc

Cc: krajshree@chromium.org
 Issue 900657  has been merged into this issue.
Project Member

Comment 29 by bugdroid1@chromium.org, Nov 12

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/4993ce4f9e0be1cf0618d84949cd8b70f5361ec0

commit 4993ce4f9e0be1cf0618d84949cd8b70f5361ec0
Author: Leonard Grey <lgrey@chromium.org>
Date: Mon Nov 12 18:11:30 2018

Support dark mode in theme properties

Bug: 850098

Change-Id: Ic1d51dda680bcc6c24fab1c17099a1d558285528
Reviewed-on: https://chromium-review.googlesource.com/c/1313670
Commit-Queue: Leonard Grey <lgrey@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#607289}
[modify] https://crrev.com/4993ce4f9e0be1cf0618d84949cd8b70f5361ec0/chrome/browser/themes/theme_properties.cc

With the above change landed, remaining surfaces that I can find:
- Infobar
- Secondary UI text fields/disabled buttons
- Avatar menu text
- Default bookmark page icon

Project Member

Comment 31 by bugdroid1@chromium.org, Nov 16

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ca740c83c1e3c479352f7c7e47be494e41b550e4

commit ca740c83c1e3c479352f7c7e47be494e41b550e4
Author: Leonard Grey <lgrey@chromium.org>
Date: Fri Nov 16 22:55:45 2018

Dark mode odds and ends

This should cover:
- Infobar
- Detached bookmark bar
- Avatar menu text (but not icons yet)
- Default bookmark icon
- Toolbar buttons
- Secondary UI controls

Bug: 850098
Change-Id: I6583f06e9470e320826f766e18d9c6e9141b75fa
Reviewed-on: https://chromium-review.googlesource.com/c/1337793
Commit-Queue: Leonard Grey <lgrey@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609010}
[modify] https://crrev.com/ca740c83c1e3c479352f7c7e47be494e41b550e4/chrome/browser/themes/theme_properties.cc
[modify] https://crrev.com/ca740c83c1e3c479352f7c7e47be494e41b550e4/ui/native_theme/common_theme.cc

Hi lgrey@,

A few more Dark Mode odds and ends :)

- Screenshot_1: The font color in the autocompleted part in the Omnibox could be white instead of black in the Normal window. (Please compare with the Incognito window.)

- Screenshot_2: When the Normal window is in the background, the color of the tabstrip background is nearly the same color like the Toolbar and the foregrounded tab, which makes it hard to distinguish between them. (Please compare with a backgrounded Incognito Window.)

- Screenshot_3: The mouse cursor highlight in the menus could be grey like the Omnibox highlight or the Profile Menu highlight. It is currently white in Normal and Incognito Menus.

- Screenshot_4: The Toolbar bottom border is white. It could be dark like in Incognito Mode.

If you need more information, please let me know.

Thanks :)

Screenshot_1.png
31.6 KB View Download
Screenshot_2.png
95.2 KB View Download
Screenshot_3.png
38.8 KB View Download
Screenshot_4.png
79.1 KB View Download
Labels: Hotlist-DesktopUIChecked Hotlist-DesktopUIValid
**UI mass Triage**

Seems like WIP and bug is valid, hence tagging with appropriate label.
Hi, just wanted to know when macos dark mode will deploy to beta. Thanks
In macOS Mojave, Dark Mode uses something called "Desktop Tinting" to add tint from the background into dark mode windows to set them more realistically in the background. In the attached image, see the difference between the Finder window (on the left) and the current Dev build of Google Chrome with --force-dark-mode.

Some basic information can be found on this here in the macOS HIG: https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/

More detailed information (in a Cocoa context, but still helpful in explaining the concepts) can be found in these sessions from this year's WWDC:
https://developer.apple.com/videos/play/wwdc2018/210/
https://developer.apple.com/videos/play/wwdc2018/218/

(PDFs of these sessions are also available at those links; they contain graphics which show the difference on different backgrounds, in case it is not more obvious.)

I understand if something like this might not make it into Chrome 71 at this point, but I felt the need to point this out, as implementing desktop tinting would better help Chrome sit well amongst the other Cocoa-native dark mode applications.
Screenshot 2018-11-27 21.19.20.png
50.7 KB View Download
keshav.madhavan@gmail.com: Can't say for sure at this point, since it's not done. For example, most or all of the specific colors are placeholders at this point.

ruth@gui.life: we're aware of materials, but it's challenging with our current architecture. We're investigating whether we can make it work, but it's not a goal for the current implementation.
Cc: dbeam@chromium.org
Project Member

Comment 38 by bugdroid1@chromium.org, Dec 5

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7f2c992b857059dc31c09c1f5d91a23c03a3bf15

commit 7f2c992b857059dc31c09c1f5d91a23c03a3bf15
Author: Leonard Grey <lgrey@chromium.org>
Date: Wed Dec 05 16:03:22 2018

Mac: Change dark mode optout logic and respond to system changes

This change hooks up the "DarkMode" feature, allowing for three states
in Mojave:
- --force-dark-mode for dark appearance unconditionally
- --enable-feature=DarkMode to track system dark mode status
- No flags/default state is light appearance unconditionally

Since we build with an SDK < 10.14, we still need the Info.plist
key, but it now must be false.

Some related changes:
- Make Omnibox tint respond to OnNativeThemeChanged
- React immediately to changes in high contrast mode setting

Bug: 850098
Change-Id: I08a2c79bb8b79c4ca17fff10bc86249e9aa484c5
Reviewed-on: https://chromium-review.googlesource.com/c/1352394
Commit-Queue: Leonard Grey <lgrey@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Reviewed-by: Robert Sesek <rsesek@chromium.org>
Cr-Commit-Position: refs/heads/master@{#613981}
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/base/mac/sdk_forward_declarations.h
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/base/mac/sdk_forward_declarations.mm
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/chrome/app/app-Info.plist
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/chrome/browser/chrome_browser_application_mac.mm
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/chrome/browser/chrome_browser_main_mac.h
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/chrome/browser/chrome_browser_main_mac.mm
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/chrome/browser/ui/views/location_bar/location_bar_view.cc
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/ui/native_theme/native_theme_mac.h
[modify] https://crrev.com/7f2c992b857059dc31c09c1f5d91a23c03a3bf15/ui/native_theme/native_theme_mac.mm

Comment 39 by robliao@chromium.org, Dec 11 (2 days ago)

Labels: -M-71 -Target-71 M-73 Target-73

Sign in to add a comment