From be63d9701c07d64c28ffc2a5fe6b9554dc2c3a1f Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Thu, 17 Apr 2025 19:53:32 +0800
Subject: [PATCH] theme: Improve Switch and Sidebar selected item bg color.
 (#801)

---
 crates/ui/src/sidebar/menu.rs |  4 ++--
 crates/ui/src/switch.rs       | 23 +++++++++++++++++------
 crates/ui/src/theme.rs        |  8 ++++----
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/crates/ui/src/sidebar/menu.rs b/crates/ui/src/sidebar/menu.rs
index cae29c61..b25ca1b7 100644
--- a/crates/ui/src/sidebar/menu.rs
+++ b/crates/ui/src/sidebar/menu.rs
@@ -165,12 +165,12 @@ impl RenderOnce for SidebarMenuItem {
                             return this;
                         }
 
-                        this.bg(cx.theme().sidebar_accent)
+                        this.bg(cx.theme().accent)
                             .text_color(cx.theme().sidebar_accent_foreground)
                     })
                     .when(is_active && !is_submenu, |this| {
                         this.font_medium()
-                            .bg(cx.theme().accent)
+                            .bg(cx.theme().sidebar_accent)
                             .text_color(cx.theme().sidebar_accent_foreground)
                     })
                     .when_some(self.icon.clone(), |this, icon| this.child(icon))
diff --git a/crates/ui/src/switch.rs b/crates/ui/src/switch.rs
index c9d6ceb7..dfe14ced 100644
--- a/crates/ui/src/switch.rs
+++ b/crates/ui/src/switch.rs
@@ -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::{
     div, prelude::FluentBuilder as _, px, Animation, AnimationExt as _, AnyElement, App, Div,
     Element, ElementId, GlobalElementId, InteractiveElement, IntoElement, LayoutId,
@@ -123,7 +125,13 @@ impl Element for Switch {
             };
 
             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),
             };
 
@@ -172,8 +180,12 @@ impl Element for Switch {
                                 })
                                 .child(
                                     // Switch Toggle
-                                    div().rounded(radius).bg(toggle_bg).size(bar_width).map(
-                                        |this| {
+                                    div()
+                                        .rounded(radius)
+                                        .bg(toggle_bg)
+                                        .shadow_md()
+                                        .size(bar_width)
+                                        .map(|this| {
                                             let prev_checked = state.prev_checked.clone();
                                             if !self.disabled
                                                 && prev_checked
@@ -210,8 +222,7 @@ impl Element for Switch {
                                                 let x = if checked { max_x } else { px(0.) };
                                                 this.left(x).into_any_element()
                                             }
-                                        },
-                                    ),
+                                        }),
                                 ),
                         )
                         .when_some(self.label.take(), |this, label| {
diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs
index 8caf9532..57a053b2 100644
--- a/crates/ui/src/theme.rs
+++ b/crates/ui/src/theme.rs
@@ -296,7 +296,7 @@ impl ThemeColor {
             secondary_hover: hsl(240.0, 5.9, 98.),
             selection: hsl(211.0, 97.0, 85.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_border: hsl(220.0, 13.0, 91.0),
             sidebar_foreground: hsl(240.0, 5.3, 26.1),
@@ -309,7 +309,7 @@ impl ThemeColor {
             success_active: crate::green_600(),
             success_hover: crate::green_500().opacity(0.9),
             success_foreground: crate::gray_50(),
-            switch: hsl(240.0, 5.9, 90.0),
+            switch: crate::zinc_300(),
             tab: gpui::transparent_black(),
             tab_active: hsl(0.0, 0.0, 100.0),
             tab_active_foreground: hsl(240.0, 10., 3.9),
@@ -389,7 +389,7 @@ impl ThemeColor {
             secondary_hover: hsl(240.0, 0., 15.),
             selection: hsl(211.0, 97.0, 22.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_border: hsl(240.0, 3.7, 15.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_foreground: crate::green_50(),
             success_hover: crate::green_800().opacity(0.8),
-            switch: hsl(0., 0., 31.),
+            switch: crate::zinc_600(),
             tab: gpui::transparent_black(),
             tab_active: hsl(0.0, 0.0, 8.0),
             tab_active_foreground: hsl(0., 0., 78.),