dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme: Improve Switch and Sidebar selected item bg color. (#801)

Browse source
This commit is contained in:
Jason Lee 2025-04-17 19:53:32 +08:00 committed by GitHub
parent 413d156ef4
commit be63d9701c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crates/ui/src/sidebar/menu.rs
View file

@ -165,12 +165,12 @@ impl RenderOnce for SidebarMenuItem {
return this; return this;
} }
this.bg(cx.theme().sidebar_accent) this.bg(cx.theme().accent)
.text_color(cx.theme().sidebar_accent_foreground) .text_color(cx.theme().sidebar_accent_foreground)
}) })
.when(is_active && !is_submenu, |this| { .when(is_active && !is_submenu, |this| {
this.font_medium() this.font_medium()
.bg(cx.theme().accent) .bg(cx.theme().sidebar_accent)
.text_color(cx.theme().sidebar_accent_foreground) .text_color(cx.theme().sidebar_accent_foreground)
}) })
.when_some(self.icon.clone(), |this, icon| this.child(icon)) .when_some(self.icon.clone(), |this, icon| this.child(icon))

23
crates/ui/src/switch.rs
View file

@ -1,4 +1,6 @@
use crate::{h_flex, text::Text, tooltip::Tooltip, ActiveTheme, Disableable, Side, Sizable, Size}; use crate::{
h_flex, text::Text, tooltip::Tooltip, ActiveTheme, Colorize, Disableable, Side, Sizable, Size,
};
use gpui::{ use gpui::{
div, prelude::FluentBuilder as _, px, Animation, AnimationExt as _, AnyElement, App, Div, div, prelude::FluentBuilder as _, px, Animation, AnimationExt as _, AnyElement, App, Div,
Element, ElementId, GlobalElementId, InteractiveElement, IntoElement, LayoutId, Element, ElementId, GlobalElementId, InteractiveElement, IntoElement, LayoutId,
@ -123,7 +125,13 @@ impl Element for Switch {
}; };
let (bg, toggle_bg) = match self.disabled { let (bg, toggle_bg) = match self.disabled {
true => (bg.opacity(0.3), toggle_bg.opacity(0.8)), true => {
if self.checked {
(cx.theme().muted.darken(0.05), toggle_bg.opacity(0.8))
} else {
(cx.theme().muted, toggle_bg.opacity(0.8))
}
}
false => (bg, toggle_bg), false => (bg, toggle_bg),
}; };
@ -172,8 +180,12 @@ impl Element for Switch {
}) })
.child( .child(
// Switch Toggle // Switch Toggle
div().rounded(radius).bg(toggle_bg).size(bar_width).map( div()
|this| { .rounded(radius)
.bg(toggle_bg)
.shadow_md()
.size(bar_width)
.map(|this| {
let prev_checked = state.prev_checked.clone(); let prev_checked = state.prev_checked.clone();
if !self.disabled if !self.disabled
&& prev_checked && prev_checked
@ -210,8 +222,7 @@ impl Element for Switch {
let x = if checked { max_x } else { px(0.) }; let x = if checked { max_x } else { px(0.) };
this.left(x).into_any_element() this.left(x).into_any_element()
} }
}, }),
),
), ),
) )
.when_some(self.label.take(), |this, label| { .when_some(self.label.take(), |this, label| {

8
crates/ui/src/theme.rs
View file

@ -296,7 +296,7 @@ impl ThemeColor {
secondary_hover: hsl(240.0, 5.9, 98.), secondary_hover: hsl(240.0, 5.9, 98.),
selection: hsl(211.0, 97.0, 85.0), selection: hsl(211.0, 97.0, 85.0),
sidebar: hsl(0.0, 0.0, 98.0), sidebar: hsl(0.0, 0.0, 98.0),
sidebar_accent: hsl(240.0, 4.8, 95.9), sidebar_accent: crate::zinc_200(),
sidebar_accent_foreground: hsl(240.0, 5.9, 10.0), sidebar_accent_foreground: hsl(240.0, 5.9, 10.0),
sidebar_border: hsl(220.0, 13.0, 91.0), sidebar_border: hsl(220.0, 13.0, 91.0),
sidebar_foreground: hsl(240.0, 5.3, 26.1), sidebar_foreground: hsl(240.0, 5.3, 26.1),
@ -309,7 +309,7 @@ impl ThemeColor {
success_active: crate::green_600(), success_active: crate::green_600(),
success_hover: crate::green_500().opacity(0.9), success_hover: crate::green_500().opacity(0.9),
success_foreground: crate::gray_50(), success_foreground: crate::gray_50(),
switch: hsl(240.0, 5.9, 90.0), switch: crate::zinc_300(),
tab: gpui::transparent_black(), tab: gpui::transparent_black(),
tab_active: hsl(0.0, 0.0, 100.0), tab_active: hsl(0.0, 0.0, 100.0),
tab_active_foreground: hsl(240.0, 10., 3.9), tab_active_foreground: hsl(240.0, 10., 3.9),
@ -389,7 +389,7 @@ impl ThemeColor {
secondary_hover: hsl(240.0, 0., 15.), secondary_hover: hsl(240.0, 0., 15.),
selection: hsl(211.0, 97.0, 22.0), selection: hsl(211.0, 97.0, 22.0),
sidebar: hsl(240.0, 0.0, 10.0), sidebar: hsl(240.0, 0.0, 10.0),
sidebar_accent: hsl(240.0, 3.7, 15.9), sidebar_accent: crate::zinc_800(),
sidebar_accent_foreground: hsl(240.0, 4.8, 95.9), sidebar_accent_foreground: hsl(240.0, 4.8, 95.9),
sidebar_border: hsl(240.0, 3.7, 15.9), sidebar_border: hsl(240.0, 3.7, 15.9),
sidebar_foreground: hsl(240.0, 4.8, 95.9), sidebar_foreground: hsl(240.0, 4.8, 95.9),
@ -402,7 +402,7 @@ impl ThemeColor {
success_active: crate::green_800().darken(0.2), success_active: crate::green_800().darken(0.2),
success_foreground: crate::green_50(), success_foreground: crate::green_50(),
success_hover: crate::green_800().opacity(0.8), success_hover: crate::green_800().opacity(0.8),
switch: hsl(0., 0., 31.), switch: crate::zinc_600(),
tab: gpui::transparent_black(), tab: gpui::transparent_black(),
tab_active: hsl(0.0, 0.0, 8.0), tab_active: hsl(0.0, 0.0, 8.0),
tab_active_foreground: hsl(0., 0., 78.), tab_active_foreground: hsl(0., 0., 78.),