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

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
This commit is contained in:
Jason Lee 2025-06-12 23:09:05 +08:00 committed by GitHub
parent f54129461f
commit bb5a763ef7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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