mac: support macOS 10.14 dark mode |
||||||||||||||||||||||||
Issue descriptionmacOS 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 ⛆ |
|
|
,
Jun 6 2018
,
Jun 28 2018
Issue 857349 has been merged into this issue.
,
Jul 10
Over to bettes@ for spec
,
Jul 19
,
Aug 21
,
Aug 21
,
Sep 4
Any chance to include this in M70?
,
Sep 5
Unfortunately, M70 just branched, but we should try to get it in for M71. I'll follow up with bettes@ offline.
,
Sep 6
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.
,
Sep 13
,
Sep 21
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/f1a974db5523c9c7812d34a35564e959376595a9 commit f1a974db5523c9c7812d34a35564e959376595a9 Author: Leonard Grey <lgrey@chromium.org> Date: Fri Sep 21 22:02:51 2018 Mac: Add command line switch to force dark mode Bug: 850098 Change-Id: I8d18484774982a8ec0272f62f0bd77a43668eb0d Reviewed-on: https://chromium-review.googlesource.com/1238796 Reviewed-by: ccameron <ccameron@chromium.org> Reviewed-by: Mark Mentovai <mark@chromium.org> Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org> Commit-Queue: Leonard Grey <lgrey@chromium.org> Cr-Commit-Position: refs/heads/master@{#593347} [modify] https://crrev.com/f1a974db5523c9c7812d34a35564e959376595a9/base/mac/sdk_forward_declarations.h [modify] https://crrev.com/f1a974db5523c9c7812d34a35564e959376595a9/base/mac/sdk_forward_declarations.mm [modify] https://crrev.com/f1a974db5523c9c7812d34a35564e959376595a9/chrome/browser/chrome_browser_application_mac.mm [modify] https://crrev.com/f1a974db5523c9c7812d34a35564e959376595a9/ui/base/ui_base_switches.cc [modify] https://crrev.com/f1a974db5523c9c7812d34a35564e959376595a9/ui/base/ui_base_switches.h
,
Sep 26
,
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
,
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
,
Oct 6
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.
,
Oct 6
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
,
Oct 8
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).
,
Oct 8
,
Oct 9
,
Oct 11
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
,
Oct 12
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
,
Oct 16
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e66472c74362d95c503867eea4267772d8505cf5 commit e66472c74362d95c503867eea4267772d8505cf5 Author: Leonard Grey <lgrey@chromium.org> Date: Tue Oct 16 16:19:49 2018 Add method to query system dark mode status in NativeTheme Bug: 850098, 893598 Change-Id: I0ec85e12ae0714974e4d8122914afe330ac0fe93 Reviewed-on: https://chromium-review.googlesource.com/c/1240172 Reviewed-by: Avi Drissman <avi@chromium.org> Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org> Reviewed-by: Peter Kasting <pkasting@chromium.org> Commit-Queue: Leonard Grey <lgrey@chromium.org> Cr-Commit-Position: refs/heads/master@{#600008} [modify] https://crrev.com/e66472c74362d95c503867eea4267772d8505cf5/base/mac/sdk_forward_declarations.h [modify] https://crrev.com/e66472c74362d95c503867eea4267772d8505cf5/ui/native_theme/native_theme.cc [modify] https://crrev.com/e66472c74362d95c503867eea4267772d8505cf5/ui/native_theme/native_theme.h [modify] https://crrev.com/e66472c74362d95c503867eea4267772d8505cf5/ui/native_theme/native_theme_mac.h [modify] https://crrev.com/e66472c74362d95c503867eea4267772d8505cf5/ui/native_theme/native_theme_mac.mm [modify] https://crrev.com/e66472c74362d95c503867eea4267772d8505cf5/ui/views/view_unittest.cc
,
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
,
Oct 19
Issue 896902 has been merged into this issue.
,
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
,
Nov 1
,
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
,
Nov 12
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
,
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
,
Nov 20
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 :)
,
Nov 23
**UI mass Triage** Seems like WIP and bug is valid, hence tagging with appropriate label.
,
Nov 28
Hi, just wanted to know when macos dark mode will deploy to beta. Thanks
,
Nov 28
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.
,
Nov 28
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.
,
Dec 4
,
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
,
Dec 11
,
Dec 20
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/1983a2170977184ff81c1621833a214eb779d42a commit 1983a2170977184ff81c1621833a214eb779d42a Author: Leonard Grey <lgrey@chromium.org> Date: Thu Dec 20 23:41:08 2018 Dark mode secondary UI spec/refinements This change: - Mostly implements UX's secondary UI spec - Switches topchrome to use the same colors as incognito, though this may be temporary - Replaces some temp colors Bug: 912375, 850098 Change-Id: I447c3062455330b01c0e7381d3a9eabd2709a970 Reviewed-on: https://chromium-review.googlesource.com/c/1378408 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@{#618375} [modify] https://crrev.com/1983a2170977184ff81c1621833a214eb779d42a/chrome/browser/themes/theme_properties.cc [modify] https://crrev.com/1983a2170977184ff81c1621833a214eb779d42a/chrome/browser/ui/views/chrome_typography_provider.cc [modify] https://crrev.com/1983a2170977184ff81c1621833a214eb779d42a/chrome/browser/ui/views/profiles/profile_chooser_view.cc [modify] https://crrev.com/1983a2170977184ff81c1621833a214eb779d42a/ui/native_theme/common_theme.cc [modify] https://crrev.com/1983a2170977184ff81c1621833a214eb779d42a/ui/native_theme/native_theme_mac.mm [modify] https://crrev.com/1983a2170977184ff81c1621833a214eb779d42a/ui/views/bubble/footnote_container_view.cc [modify] https://crrev.com/1983a2170977184ff81c1621833a214eb779d42a/ui/views/controls/button/md_text_button.cc
,
Dec 21
bugdroid1@chromium.org it actually looks better with the incognito colors.
,
Dec 21
I like the incognito colors as well! If there is a lot of concern about not being able to easily tell if you're in incofnito mode by the browser color, you could go with a purple color. This has been adopted in the Brave browser and Firefox very well.
,
Dec 28
Thanks lgrey@. Looks much better now with the Incognito Theme :) I only noticed that the extension menus are still bright (with a dark bold outline on top&bottom). Not sure, but maybe this is already or will be addressed in issue 893175?
,
Dec 28
My instinct is issue 893175, since this surface is provided by the extension developer. I think we could probably change the default background/font color, but if a developer specifies a dark font color and no background color, it could become unusable. Commented there to point this out.
,
Dec 28
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/ccb62e3a11b2abfb2f3af11fcc217fc727dfb017 commit ccb62e3a11b2abfb2f3af11fcc217fc727dfb017 Author: Leonard Grey <lgrey@chromium.org> Date: Fri Dec 28 19:31:58 2018 Dark mode: unify FocusedMenuItem and FocusedHighlightedMenuItem background colors It's not clear to me what the difference between these two is, but they seem to differ in the GTK theme so I'll stop short of asking about removing the latter :) This change fixes highlighted items in the autofill menu. Bug: 850098 Change-Id: I1f3fcdfeaf3ac2b524b0cf97dbc3887023d295fb Reviewed-on: https://chromium-review.googlesource.com/c/1391951 Reviewed-by: Peter Kasting <pkasting@chromium.org> Commit-Queue: Peter Kasting <pkasting@chromium.org> Cr-Commit-Position: refs/heads/master@{#619180} [modify] https://crrev.com/ccb62e3a11b2abfb2f3af11fcc217fc727dfb017/ui/native_theme/common_theme.cc
,
Jan 2
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/72e999325ec6609c2731e76afa234b77ed0f1ba6 commit 72e999325ec6609c2731e76afa234b77ed0f1ba6 Author: Leonard Grey <lgrey@chromium.org> Date: Wed Jan 02 15:38:48 2019 Mac Dark Mode: fix menu separators Bug: 850098 Change-Id: I174a01a66f7b8c0008f24a676f32b11347c33660 Reviewed-on: https://chromium-review.googlesource.com/c/1391956 Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org> Commit-Queue: Leonard Grey <lgrey@chromium.org> Cr-Commit-Position: refs/heads/master@{#619407} [modify] https://crrev.com/72e999325ec6609c2731e76afa234b77ed0f1ba6/ui/native_theme/native_theme_mac.mm
,
Jan 2
,
Jan 2
,
Jan 9
,
Jan 9
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/63f7bfc56a6bbedce4be923cdd63d277d615698f commit 63f7bfc56a6bbedce4be923cdd63d277d615698f Author: Leonard Grey <lgrey@chromium.org> Date: Wed Jan 09 22:07:33 2019 Dark mode: implement high contrast Bug: 850098 Change-Id: I60f0ea58fc989d179227d0c60a3cc150808284f7 Reviewed-on: https://chromium-review.googlesource.com/c/1399506 Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org> Reviewed-by: Peter Kasting <pkasting@chromium.org> Commit-Queue: Leonard Grey <lgrey@chromium.org> Cr-Commit-Position: refs/heads/master@{#621310} [modify] https://crrev.com/63f7bfc56a6bbedce4be923cdd63d277d615698f/chrome/browser/themes/increased_contrast_theme_supplier.cc [modify] https://crrev.com/63f7bfc56a6bbedce4be923cdd63d277d615698f/chrome/browser/themes/increased_contrast_theme_supplier.h [modify] https://crrev.com/63f7bfc56a6bbedce4be923cdd63d277d615698f/chrome/browser/themes/theme_service.cc [modify] https://crrev.com/63f7bfc56a6bbedce4be923cdd63d277d615698f/ui/native_theme/common_theme.cc [modify] https://crrev.com/63f7bfc56a6bbedce4be923cdd63d277d615698f/ui/native_theme/native_theme_mac.mm
,
Jan 10
,
Jan 14
,
Jan 14
,
Today
(21 hours ago)
,
Today
(21 hours ago)
,
Today
(21 hours ago)
,
Today
(19 hours ago)
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/9d5eed9007a19b71fb99a0a396e95813a8723f7e commit 9d5eed9007a19b71fb99a0a396e95813a8723f7e Author: Leonard Grey <lgrey@chromium.org> Date: Tue Jan 22 16:11:09 2019 Dark mode: temp tree view colors There's going to be a UX pass on tree views in general, but let's make an effort in the meantime. Bug: 850098 Change-Id: Ifaf83cbe093b5ad56286206f7a42d01f84af72f7 Reviewed-on: https://chromium-review.googlesource.com/c/1418317 Auto-Submit: Leonard Grey <lgrey@chromium.org> Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org> Commit-Queue: Elly Fong-Jones <ellyjones@chromium.org> Cr-Commit-Position: refs/heads/master@{#624795} [modify] https://crrev.com/9d5eed9007a19b71fb99a0a396e95813a8723f7e/ui/native_theme/common_theme.cc |
|||||||||||||||||||||
►
Sign in to add a comment |
||||||||||||||||||||||||
Comment 1 by ellyjo...@chromium.org
, Jun 6 2018