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::*;
@ -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)