From e5fa0709d14866d7ad9c0530a2f74bc0ef68a0ca Mon Sep 17 00:00:00 2001
From: han <83765419+han1548772930@users.noreply.github.com>
Date: Wed, 26 Nov 2025 10:25:35 +0800
Subject: [PATCH] theme: Add `switch.thumb.background` theme config support
 (#1685)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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                 | 4 ++++
 crates/ui/src/switch.rs            | 4 ++--
 crates/ui/src/theme/schema.rs      | 4 ++++
 crates/ui/src/theme/theme_color.rs | 2 ++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.theme-schema.json b/.theme-schema.json
index a85b08f9..287dbb78 100644
--- a/.theme-schema.json
+++ b/.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"]
diff --git a/crates/ui/src/switch.rs b/crates/ui/src/switch.rs
index 6641a203..942de488 100644
--- a/crates/ui/src/switch.rs
+++ b/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 {
diff --git a/crates/ui/src/theme/schema.rs b/crates/ui/src/theme/schema.rs
index 48d613ca..166de9fe 100644
--- a/crates/ui/src/theme/schema.rs
+++ b/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);
diff --git a/crates/ui/src/theme/theme_color.rs b/crates/ui/src/theme/theme_color.rs
index 4f7ebfac..c148c494 100644
--- a/crates/ui/src/theme/theme_color.rs
+++ b/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.