Add detailed view for Dark Theme settings

Bug: 1106012

Change-Id: I58d4ec83d6367dd62d94c326f48118e81b1ddc94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2355830Reviewed-by: Tim Song <tengs@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Ahmed Mehfooz <amehfooz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799372}

ash/BUILD.gn

@@ -886,6 +886,10 @@ component("ash") {
     "system/cast/tray_cast.h",
     "system/cast/unified_cast_detailed_view_controller.cc",
     "system/cast/unified_cast_detailed_view_controller.h",
+    "system/dark_mode/dark_mode_detailed_view.cc",
+    "system/dark_mode/dark_mode_detailed_view.h",
+    "system/dark_mode/dark_mode_detailed_view_controller.cc",
+    "system/dark_mode/dark_mode_detailed_view_controller.h",
     "system/dark_mode/dark_mode_feature_pod_controller.cc",
     "system/dark_mode/dark_mode_feature_pod_controller.h",
     "system/enterprise/enterprise_domain_observer.h",

ash/ash_strings.grd

@@ -213,6 +213,9 @@ This file contains the strings for ash.
       <message name="IDS_ASH_QUICK_SETTINGS_BUBBLE_CAST_SETTINGS_ACCESSIBLE_DESCRIPTION" desc="The accessible description for cast settings accessed through the cast feature pod.">
         Cast Settings
       </message>
+      <message name="IDS_ASH_QUICK_SETTINGS_BUBBLE_DARK_THEME_SETTINGS_ACCESSIBLE_DESCRIPTION" desc="The accessible description for dark theme settings accessed through the dark theme feature pod.">
+        Dark Theme Settings
+      </message>
       <message name="IDS_ASH_QUICK_SETTINGS_BUBBLE_IME_SETTINGS_ACCESSIBLE_DESCRIPTION" desc="The accessible description for IME settings accessed through the IME feature pod.">
         IME Settings
       </message>
@@ -327,10 +330,10 @@ This file contains the strings for ash.
       <message name="IDS_ASH_STATUS_TRAY_CAST_CAST_DESKTOP" desc="The label used in the tray popup to tell the user we are casting the desktop.">
         Casting screen to <ph name="RECEIVER_NAME">$1<ex>Living Room</ex></ph>
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_BUTTON_LABEL" desc="The shorter label used for the button in the status tray to toggle the Dark Mode feature (which controls the color temperature of the screen) on or off. [CHAR_LIMIT=14]">
+      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_BUTTON_LABEL" desc="The shorter label used for the button in the status tray to toggle the Dark Mode feature. [CHAR_LIMIT=14]">
         Dark Mode
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_TOGGLE_TOOLTIP" desc="The tooltip text used for the button in the status tray to toggle the Dark Mode feature (which controls the color temperature of the screen) on or off.">
+      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_TOGGLE_TOOLTIP" desc="The tooltip text used for the button in the status tray to toggle the Dark Mode feature on or off.">
         Toggle Dark Mode. <ph name="STATE_TEXT">$1<ex>Dark Mode is on.</ex></ph>
       </message>
       <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_ENABLED_STATE_TOOLTIP" desc="The tooltip text indicating the Dark Mode feature is on.">
@@ -339,7 +342,7 @@ This file contains the strings for ash.
       <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_DISABLED_STATE_TOOLTIP" desc="The tooltip text indicating the Dark Mode feature is off.">
         Dark Mode is off.
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_SETTINGS_TOOLTIP" desc="The tooltip text used for the button in the status tray to show the Dark Mode feature (which controls the color temperature of the screen) settings.">
+      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_SETTINGS_TOOLTIP" desc="The tooltip text used for the button in the status tray to show the Dark Mode feature settings.">
         Show dark mode settings
       </message>
       <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_OFF_STATE" desc="Button label for the Dark Mode feature." meaning="Dark Mode feature is off. [CHAR_LIMIT=14]">
@@ -348,6 +351,24 @@ This file contains the strings for ash.
       <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_ON_STATE" desc="Button label for the Dark Mode feature." meaning="Dark Mode feature is on. [CHAR_LIMIT=14]">
         On
       </message>
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_TITLE" desc="The title for the dark theme detailed view.">
+        Dark Theme
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_COLOR_MODE" desc="The title for the dark theme detailed view.">
+        Color mode
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_TITLE" desc="The title for the dark theme detailed view.">
+        Themed (default)
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_DESCRIPTION" desc="The description for the neutral color mode.">
+        The themed color mode uses colors extracted from your wallpaper to lightly colorize the interface.
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_TITLE" desc="The title for the dark theme detailed view.">
+        Neutral
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_DESCRIPTION" desc="The description for the neutral color mode.">
+        The neutral color mode does not use wallpaper extracted colors, replacing them by a set of neutrally toned light or dark hues.
+      </message>
       <message name="IDS_ASH_STATUS_TRAY_CAST_CAST_DESKTOP_ACCESSIBILITY_STOP" desc="Stop button accessibility label used in the tray popup to tell the user to stop a cast to the desktop.">
         Stop casting screen to <ph name="RECEIVER_NAME">$1<ex>Living Room</ex></ph>
       </message>

ash/ash_strings_grd/IDS_ASH_QUICK_SETTINGS_BUBBLE_DARK_THEME_SETTINGS_ACCESSIBLE_DESCRIPTION.png.sha1

+b984fdd2b7a94169d228b51a826393fd7e953dbd
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_COLOR_MODE.png.sha1

+b984fdd2b7a94169d228b51a826393fd7e953dbd
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_DESCRIPTION.png.sha1

+b984fdd2b7a94169d228b51a826393fd7e953dbd
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_TITLE.png.sha1

+b984fdd2b7a94169d228b51a826393fd7e953dbd
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_DESCRIPTION.png.sha1

+b984fdd2b7a94169d228b51a826393fd7e953dbd
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_TITLE.png.sha1

+b984fdd2b7a94169d228b51a826393fd7e953dbd
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_TITLE.png.sha1

+b984fdd2b7a94169d228b51a826393fd7e953dbd
\ No newline at end of file

ash/resources/vector_icons/BUILD.gn

@@ -40,6 +40,7 @@ aggregate_vector_icons("ash_vector_icons") {
     "check_circle.icon",
     "close_button.icon",
     "custom_data.icon",
+    "dark_theme_color_mode.icon",
     "delete.icon",
     "desks_new_desk_button.icon",
     "dictation_menu.icon",

ash/resources/vector_icons/dark_theme_color_mode.icon

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 14,
+MOVE_TO, 0, 7,
+CUBIC_TO, 0, 10.86f, 3.14f, 14, 7, 14,
+CUBIC_TO, 7.97f, 14, 8.75f, 13.22f, 8.75f, 12.25f,
+CUBIC_TO, 8.75f, 11.82f, 8.59f, 11.41f, 8.3f, 11.08f,
+CUBIC_TO, 8.25f, 11.01f, 8.21f, 10.93f, 8.21f, 10.85f,
+CUBIC_TO, 8.21f, 10.65f, 8.36f, 10.5f, 8.56f, 10.5f,
+H_LINE_TO, 9.8f,
+CUBIC_TO, 12.12f, 10.5f, 14, 8.62f, 14, 6.3f,
+CUBIC_TO, 14, 2.83f, 10.86f, 0, 7, 0,
+CUBIC_TO, 3.14f, 0, 0, 3.14f, 0, 7,
+CLOSE,
+MOVE_TO, 2, 7,
+CUBIC_TO, 2, 4.24f, 4.24f, 2, 7, 2,
+CUBIC_TO, 9.76f, 2, 12, 3.96f, 12, 6.38f,
+CUBIC_TO, 12, 7.76f, 11, 9, 9, 9,
+H_LINE_TO, 8,
+CUBIC_TO, 7.14f, 9, 6.33f, 9.57f, 6.33f, 10.44f,
+CUBIC_TO, 6.33f, 10.81f, 6.47f, 11.18f, 6.73f, 11.47f,
+CUBIC_TO, 6.76f, 11.51f, 6.81f, 11.59f, 6.81f, 11.69f,
+CUBIC_TO, 6.81f, 11.86f, 6.68f, 12, 6.5f, 12,
+CUBIC_TO, 3.74f, 12, 2, 9.76f, 2, 7,
+CLOSE,
+MOVE_TO, 4, 9,
+CUBIC_TO, 4.55f, 9, 5, 8.55f, 5, 8,
+CUBIC_TO, 5, 7.45f, 4.55f, 7, 4, 7,
+CUBIC_TO, 3.45f, 7, 3, 7.45f, 3, 8,
+CUBIC_TO, 3, 8.55f, 3.45f, 9, 4, 9,
+CLOSE,
+MOVE_TO, 5.7f, 5,
+CUBIC_TO, 5.7f, 5.55f, 5.25f, 6, 4.7f, 6,
+CUBIC_TO, 4.15f, 6, 3.7f, 5.55f, 3.7f, 5,
+CUBIC_TO, 3.7f, 4.45f, 4.15f, 4, 4.7f, 4,
+CUBIC_TO, 5.25f, 4, 5.7f, 4.45f, 5.7f, 5,
+CLOSE,
+MOVE_TO, 7.7f, 5,
+CUBIC_TO, 8.25f, 5, 8.7f, 4.55f, 8.7f, 4,
+CUBIC_TO, 8.7f, 3.45f, 8.25f, 3, 7.7f, 3,
+CUBIC_TO, 7.15f, 3, 6.7f, 3.45f, 6.7f, 4,
+CUBIC_TO, 6.7f, 4.55f, 7.15f, 5, 7.7f, 5,
+CLOSE,
+MOVE_TO, 11, 6,
+CUBIC_TO, 11, 6.55f, 10.55f, 7, 10, 7,
+CUBIC_TO, 9.45f, 7, 9, 6.55f, 9, 6,
+CUBIC_TO, 9, 5.45f, 9.45f, 5, 10, 5,
+CUBIC_TO, 10.55f, 5, 11, 5.45f, 11, 6,
+CLOSE

ash/style/ash_color_provider.h

@@ -213,6 +213,7 @@ class ASH_EXPORT AshColorProvider {
                            const gfx::VectorIcon& icon);
 
   AshColorMode color_mode() const { return color_mode_; }
+  bool is_themed() const { return is_themed_; }
 
  private:
   // Gets Shield layer color on |type| and |color_mode|. This function will be

ash/system/dark_mode/dark_mode_detailed_view.cc

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "ash/system/dark_mode/dark_mode_detailed_view.h"
+
+#include "ash/resources/vector_icons/vector_icons.h"
+#include "ash/strings/grit/ash_strings.h"
+#include "ash/style/ash_color_provider.h"
+#include "ash/system/tray/tray_constants.h"
+#include "ash/system/tray/tray_detailed_view.h"
+#include "ash/system/tray/tray_popup_item_style.h"
+#include "ash/system/tray/tray_popup_utils.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/gfx/vector_icon_types.h"
+#include "ui/views/controls/button/radio_button.h"
+#include "ui/views/controls/button/toggle_button.h"
+#include "ui/views/controls/scroll_view.h"
+
+namespace ash {
+
+namespace {
+
+class TrayRadioButton : public views::RadioButton {
+ public:
+  TrayRadioButton(views::ButtonListener* listener,
+                  const base::string16& button_label)
+      : views::RadioButton(button_label) {
+    SetBorder(views::CreateEmptyBorder(kTrayRadioButtonPadding));
+    SetImageLabelSpacing(kTrayRadioButtonInterSpacing);
+    set_listener(listener);
+  }
+
+  // views::RadioButton:
+  void OnThemeChanged() override {
+    TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::SMALL_TITLE);
+    SetEnabledTextColors(style.GetTextColor());
+    style.SetupLabel(label());
+  }
+};
+
+}  // namespace
+
+DarkModeDetailedView::DarkModeDetailedView(DetailedViewDelegate* delegate)
+    : TrayDetailedView(delegate) {
+  CreateItems();
+}
+
+DarkModeDetailedView::~DarkModeDetailedView() = default;
+
+void DarkModeDetailedView::CreateItems() {
+  CreateTitleRow(IDS_ASH_STATUS_TRAY_DARK_THEME_TITLE);
+
+  // Add toggle button.
+  tri_view()->SetContainerVisible(TriView::Container::END, true);
+
+  toggle_ =
+      TrayPopupUtils::CreateToggleButton(this, IDS_ASH_STATUS_TRAY_BLUETOOTH);
+  toggle_->SetIsOn(AshColorProvider::Get()->color_mode() ==
+                   AshColorProvider::AshColorMode::kDark);
+  tri_view()->AddView(TriView::Container::END, toggle_);
+
+  // Add color mode options.
+  CreateScrollableList();
+  AddScrollListSubHeader(kDarkThemeColorModeIcon,
+                         IDS_ASH_STATUS_TRAY_DARK_THEME_COLOR_MODE);
+
+  themed_mode_button_ =
+      scroll_content()->AddChildView(std::make_unique<TrayRadioButton>(
+          this, l10n_util::GetStringUTF16(
+                    IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_TITLE)));
+  TrayPopupUtils::SetupTraySubLabel(scroll_content()->AddChildView(
+      std::make_unique<views::Label>(l10n_util::GetStringUTF16(
+          IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_DESCRIPTION))));
+
+  neutral_mode_button_ =
+      scroll_content()->AddChildView(std::make_unique<TrayRadioButton>(
+          this, l10n_util::GetStringUTF16(
+                    IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_TITLE)));
+  TrayPopupUtils::SetupTraySubLabel(scroll_content()->AddChildView(
+      std::make_unique<views::Label>(l10n_util::GetStringUTF16(
+          IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_DESCRIPTION))));
+
+  // Set the relevant radio button to be checked.
+  AshColorProvider::Get()->is_themed() ? themed_mode_button_->SetChecked(true)
+                                       : neutral_mode_button_->SetChecked(true);
+
+  scroll_content()->SizeToPreferredSize();
+  Layout();
+}
+
+const char* DarkModeDetailedView::GetClassName() const {
+  return "DarkModeDetailedView";
+}
+
+void DarkModeDetailedView::HandleButtonPressed(views::Button* sender,
+                                               const ui::Event& event) {
+  if (sender == toggle_) {
+    // TODO(amehfooz): Toggle Dark / Light mode here.
+  } else if (sender == themed_mode_button_) {
+    // TODO(amehfooz): Switch to themed mode here.
+  } else if (sender == neutral_mode_button_) {
+    // TODO(amehfooz): Switch to neutral mode here.
+  }
+}
+
+}  // namespace ash

ash/system/dark_mode/dark_mode_detailed_view.h

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_H_
+#define ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_H_
+
+#include "ash/system/tray/tray_detailed_view.h"
+
+namespace views {
+class RadioButton;
+class ToggleButton;
+}  // namespace views
+
+namespace ash {
+
+// This view displays options to switch between themed and neutral
+// color mode for the system. Accessed by clicking on the dark mode
+// feature pod label button.
+class DarkModeDetailedView : public TrayDetailedView {
+ public:
+  explicit DarkModeDetailedView(DetailedViewDelegate* delegate);
+  DarkModeDetailedView(const DarkModeDetailedView& other) = delete;
+  DarkModeDetailedView& operator=(const DarkModeDetailedView& other) = delete;
+  ~DarkModeDetailedView() override;
+
+  // views::View:
+  const char* GetClassName() const override;
+
+ private:
+  void CreateItems();
+
+  // TrayDetailedView:
+  void HandleButtonPressed(views::Button* sender,
+                           const ui::Event& event) override;
+
+  views::ToggleButton* toggle_ = nullptr;
+  views::RadioButton* themed_mode_button_ = nullptr;
+  views::RadioButton* neutral_mode_button_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_H_

ash/system/dark_mode/dark_mode_detailed_view_controller.cc

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "ash/system/dark_mode/dark_mode_detailed_view_controller.h"
+
+#include "ash/strings/grit/ash_strings.h"
+#include "ash/system/dark_mode/dark_mode_detailed_view.h"
+#include "ash/system/tray/detailed_view_delegate.h"
+#include "ui/base/l10n/l10n_util.h"
+
+namespace ash {
+
+DarkModeDetailedViewController::DarkModeDetailedViewController(
+    UnifiedSystemTrayController* tray_controller)
+    : detailed_view_delegate_(
+          std::make_unique<DetailedViewDelegate>(tray_controller)) {}
+
+DarkModeDetailedViewController::~DarkModeDetailedViewController() = default;
+
+views::View* DarkModeDetailedViewController::CreateView() {
+  DCHECK(!view_);
+  view_ = new DarkModeDetailedView(detailed_view_delegate_.get());
+  return view_;
+}
+
+base::string16 DarkModeDetailedViewController::GetAccessibleName() const {
+  return l10n_util::GetStringUTF16(
+      IDS_ASH_QUICK_SETTINGS_BUBBLE_DARK_THEME_SETTINGS_ACCESSIBLE_DESCRIPTION);
+}
+
+}  // namespace ash

ash/system/dark_mode/dark_mode_detailed_view_controller.h

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_CONTROLLER_H_
+#define ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_CONTROLLER_H_
+
+#include "ash/system/unified/detailed_view_controller.h"
+
+namespace ash {
+class DarkModeDetailedView;
+class DetailedViewDelegate;
+class UnifiedSystemTrayController;
+
+// Controller of dark mode detailed view in UnifiedSystemTray.
+class DarkModeDetailedViewController : public DetailedViewController {
+ public:
+  explicit DarkModeDetailedViewController(
+      UnifiedSystemTrayController* tray_controller);
+  DarkModeDetailedViewController(const DarkModeDetailedViewController& other) =
+      delete;
+  DarkModeDetailedViewController& operator=(
+      const DarkModeDetailedViewController& other) = delete;
+  ~DarkModeDetailedViewController() override;
+
+  // DetailedViewControllerBase:
+  views::View* CreateView() override;
+  base::string16 GetAccessibleName() const override;
+
+ private:
+  const std::unique_ptr<DetailedViewDelegate> detailed_view_delegate_;
+
+  DarkModeDetailedView* view_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_CONTROLLER_H_

ash/system/dark_mode/dark_mode_feature_pod_controller.cc

@@ -8,6 +8,7 @@
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
 #include "ash/system/unified/feature_pod_button.h"
+#include "ash/system/unified/unified_system_tray_controller.h"
 #include "ui/base/l10n/l10n_util.h"
 
 namespace ash {
@@ -41,7 +42,7 @@ void DarkModeFeaturePodController::OnIconPressed() {
 }
 
 void DarkModeFeaturePodController::OnLabelPressed() {
-  // TODO(amehfooz): Add entry to detailed view here.
+  tray_controller_->ShowDarkModeDetailedView();
 }
 
 SystemTrayItemUmaType DarkModeFeaturePodController::GetUmaType() const {

ash/system/tray/tray_constants.h

@@ -110,6 +110,10 @@ constexpr gfx::Insets kMicGainSliderViewPadding(0, 52, 0, 0);
 constexpr gfx::Insets kMicGainSliderPadding(0, 8, 0, 48);
 constexpr int kMicGainSliderViewSpacing = 8;
 
+constexpr int kTrayRadioButtonInterSpacing = 20;
+constexpr gfx::Insets kTrayRadioButtonPadding(16, 20, 0, 0);
+constexpr gfx::Insets kTraySubLabelPadding(4, 56, 16, 16);
+
 constexpr int kMessageCenterCollapseThreshold = 175;
 constexpr int kStackedNotificationBarHeight = 32;
 constexpr int kStackedNotificationBarCollapsedHeight = 40;

ash/system/tray/tray_popup_utils.cc

@@ -18,6 +18,7 @@
 #include "ash/system/tray/hover_highlight_view.h"
 #include "ash/system/tray/size_range_layout.h"
 #include "ash/system/tray/tray_constants.h"
+#include "ash/system/tray/tray_popup_item_style.h"
 #include "ash/system/tray/unfocusable_label.h"
 #include "ash/system/unified/unified_system_tray_view.h"
 #include "ui/base/l10n/l10n_util.h"
@@ -28,6 +29,7 @@
 #include "ui/views/animation/ink_drop_highlight.h"
 #include "ui/views/animation/ink_drop_impl.h"
 #include "ui/views/animation/square_ink_drop_ripple.h"
+#include "ui/views/border.h"
 #include "ui/views/controls/button/button.h"
 #include "ui/views/controls/button/md_text_button.h"
 #include "ui/views/controls/button/toggle_button.h"
@@ -371,4 +373,14 @@ void TrayPopupUtils::UpdateCheckMarkVisibility(HoverHighlightView* container,
               : HoverHighlightView::AccessibilityState::UNCHECKED_CHECKBOX);
 }
 
+void TrayPopupUtils::SetupTraySubLabel(views::Label* label) {
+  label->SetBorder(views::CreateEmptyBorder(kTraySubLabelPadding));
+  label->SetMultiLine(true);
+  label->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
+
+  TrayPopupItemStyle sub_style(TrayPopupItemStyle::FontStyle::CAPTION);
+  sub_style.set_color_style(TrayPopupItemStyle::ColorStyle::INACTIVE);
+  sub_style.SetupLabel(label);
+}
+
 }  // namespace ash

ash/system/tray/tray_popup_utils.h

@@ -191,6 +191,9 @@ class TrayPopupUtils {
   static void UpdateCheckMarkVisibility(HoverHighlightView* container,
                                         bool visible);
 
+  // Sets up the font and padding for sub labels used in some detailed views.
+  static void SetupTraySubLabel(views::Label* label);
+
  private:
   DISALLOW_IMPLICIT_CONSTRUCTORS(TrayPopupUtils);
 };

ash/system/unified/unified_system_tray_controller.cc

@@ -21,6 +21,7 @@
 #include "ash/system/brightness/unified_brightness_slider_controller.h"
 #include "ash/system/cast/cast_feature_pod_controller.h"
 #include "ash/system/cast/unified_cast_detailed_view_controller.h"
+#include "ash/system/dark_mode/dark_mode_detailed_view_controller.h"
 #include "ash/system/ime/ime_feature_pod_controller.h"
 #include "ash/system/ime/unified_ime_detailed_view_controller.h"
 #include "ash/system/locale/locale_feature_pod_controller.h"
@@ -342,6 +343,10 @@ void UnifiedSystemTrayController::ShowAudioDetailedView() {
   ShowDetailedView(std::make_unique<UnifiedAudioDetailedViewController>(this));
 }
 
+void UnifiedSystemTrayController::ShowDarkModeDetailedView() {
+  ShowDetailedView(std::make_unique<DarkModeDetailedViewController>(this));
+}
+
 void UnifiedSystemTrayController::ShowNotifierSettingsView() {
   DCHECK(Shell::Get()->session_controller()->ShouldShowNotificationTray());
   DCHECK(!Shell::Get()->session_controller()->IsScreenLocked());

ash/system/unified/unified_system_tray_controller.h

@@ -86,6 +86,8 @@ class ASH_EXPORT UnifiedSystemTrayController
   void ShowLocaleDetailedView();
   // Show the detailed view of audio. Called from the view.
   void ShowAudioDetailedView();
+  // Show the detailed view for dark mode. Called from the feature pod button.
+  void ShowDarkModeDetailedView();
   // Show the detailed view of notifier settings. Called from the view.
   void ShowNotifierSettingsView();