theme: Add switch.thumb.background theme config support (#1685)

## Description:
This PR adds support for customizing the Switch component's thumb color.

- Changes:
•  Added switch_thumb field to ThemeColor and ThemeConfig.
•  Updated Switch component to use cx.theme().switch_thumb.
• Config key: switch.thumb.background (falls back to background color if
not set).

Co-authored-by: hl <hl@nmcsoft.com>

.theme-schema.json

@@ -409,6 +409,10 @@
           "description": "Switch background color.",
           "type": ["string", "null"]
         },
+        "switch.thumb.background": {
+          "description": "Switch thumb background color.",
+          "type": ["string", "null"]
+        },
         "tab.background": {
           "description": "Tab background color.",
           "type": ["string", "null"]

crates/ui/src/switch.rs

@@ -94,8 +94,8 @@ impl RenderOnce for Switch {
         let toggle_state = window.use_keyed_state(self.id.clone(), cx, |_, _| checked);
 
         let (bg, toggle_bg) = match checked {
-            true => (cx.theme().primary, cx.theme().background),
-            false => (cx.theme().switch, cx.theme().background),
+            true => (cx.theme().primary, cx.theme().switch_thumb),
+            false => (cx.theme().switch, cx.theme().switch_thumb),
         };
 
         let (bg, toggle_bg) = if self.disabled {

crates/ui/src/theme/schema.rs

@@ -284,6 +284,9 @@ pub struct ThemeConfigColors {
     /// Switch background color.
     #[serde(rename = "switch.background")]
     pub switch: Option<SharedString>,
+    /// Switch thumb background color.
+    #[serde(rename = "switch.thumb.background")]
+    pub switch_thumb: Option<SharedString>,
     /// Tab background color.
     #[serde(rename = "tab.background")]
     pub tab: Option<SharedString>,
@@ -599,6 +602,7 @@ impl ThemeColor {
         apply_color!(slider_bar, fallback = self.primary);
         apply_color!(slider_thumb, fallback = self.primary_foreground);
         apply_color!(switch, fallback = self.secondary);
+        apply_color!(switch_thumb, fallback = self.background);
         apply_color!(tab, fallback = self.background);
         apply_color!(tab_active, fallback = self.background);
         apply_color!(tab_active_foreground, fallback = self.foreground);

crates/ui/src/theme/theme_color.rs

@@ -149,6 +149,8 @@ pub struct ThemeColor {
     pub success_active: Hsla,
     /// Switch background color.
     pub switch: Hsla,
+    /// Switch thumb background color.
+    pub switch_thumb: Hsla,
     /// Tab background color.
     pub tab: Hsla,
     /// Tab active background color.