title_bar: Use theme colors for window controls on Windows (#32400)

Jason Lee created 6 months ago

Release Notes:

- N/A

----

Fix Windows title bar window button color by use theme colors.

The `ghost_element_hover` and `ghost_element_active` is same color as
the Buttons in title bar.

## Before


https://github.com/user-attachments/assets/e38a4f9c-7e5c-4d50-b578-608baebaf03c

## After


https://github.com/user-attachments/assets/a32e4d88-1e64-407e-a601-716ca7584111

Change summary

crates/title_bar/src/platforms/platform_windows.rs | 39 +++++----------
1 file changed, 14 insertions(+), 25 deletions(-)

Detailed changes

crates/title_bar/src/platforms/platform_windows.rs

@@ -1,4 +1,4 @@
-use gpui::{Rgba, WindowAppearance, WindowControlArea, prelude::*};
+use gpui::{Hsla, Rgba, WindowControlArea, prelude::*};
 
 use ui::prelude::*;
 
@@ -33,7 +33,7 @@ impl WindowsWindowControls {
 }
 
 impl RenderOnce for WindowsWindowControls {
-    fn render(self, window: &mut Window, _: &mut App) -> impl IntoElement {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
         let close_button_hover_color = Rgba {
             r: 232.0 / 255.0,
             g: 17.0 / 255.0,
@@ -41,20 +41,8 @@ impl RenderOnce for WindowsWindowControls {
             a: 1.0,
         };
 
-        let button_hover_color = match window.appearance() {
-            WindowAppearance::Light | WindowAppearance::VibrantLight => Rgba {
-                r: 0.1,
-                g: 0.1,
-                b: 0.1,
-                a: 0.2,
-            },
-            WindowAppearance::Dark | WindowAppearance::VibrantDark => Rgba {
-                r: 0.9,
-                g: 0.9,
-                b: 0.9,
-                a: 0.1,
-            },
-        };
+        let button_hover_color = cx.theme().colors().ghost_element_hover;
+        let button_active_color = cx.theme().colors().ghost_element_active;
 
         div()
             .id("windows-window-controls")
@@ -69,6 +57,7 @@ impl RenderOnce for WindowsWindowControls {
                 "minimize",
                 WindowsCaptionButtonIcon::Minimize,
                 button_hover_color,
+                button_active_color,
             ))
             .child(WindowsCaptionButton::new(
                 "maximize-or-restore",
@@ -78,11 +67,13 @@ impl RenderOnce for WindowsWindowControls {
                     WindowsCaptionButtonIcon::Maximize
                 },
                 button_hover_color,
+                button_active_color,
             ))
             .child(WindowsCaptionButton::new(
                 "close",
                 WindowsCaptionButtonIcon::Close,
                 close_button_hover_color,
+                button_active_color,
             ))
     }
 }
@@ -99,19 +90,22 @@ enum WindowsCaptionButtonIcon {
 struct WindowsCaptionButton {
     id: ElementId,
     icon: WindowsCaptionButtonIcon,
-    hover_background_color: Rgba,
+    hover_background_color: Hsla,
+    active_background_color: Hsla,
 }
 
 impl WindowsCaptionButton {
     pub fn new(
         id: impl Into<ElementId>,
         icon: WindowsCaptionButtonIcon,
-        hover_background_color: Rgba,
+        hover_background_color: impl Into<Hsla>,
+        active_background_color: impl Into<Hsla>,
     ) -> Self {
         Self {
             id: id.into(),
             icon,
-            hover_background_color,
+            hover_background_color: hover_background_color.into(),
+            active_background_color: active_background_color.into(),
         }
     }
 }
@@ -127,12 +121,7 @@ impl RenderOnce for WindowsCaptionButton {
             .h_full()
             .text_size(px(10.0))
             .hover(|style| style.bg(self.hover_background_color))
-            .active(|style| {
-                let mut active_color = self.hover_background_color;
-                active_color.a *= 0.2;
-
-                style.bg(active_color)
-            })
+            .active(|style| style.bg(self.active_background_color))
             .map(|this| match self.icon {
                 WindowsCaptionButtonIcon::Close => {
                     this.window_control_area(WindowControlArea::Close)