From 6a248beb2f17fe5bae6c4c556bb89667a5c73c20 Mon Sep 17 00:00:00 2001
From: Darren Burns <darrenb900@gmail.com>
Date: Wed, 9 Oct 2024 13:25:47 +0100
Subject: [PATCH] Fixing switch styles, adding subtle hover effect to suggest
 which part will move

---
 src/textual/widgets/_switch.py | 62 ++++++++++++++++++++++------------
 src/textual/widgets/_tree.py   | 13 +++++++
 2 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/textual/widgets/_switch.py b/src/textual/widgets/_switch.py
index 09d7a83fa0..88e94c53de 100644
--- a/src/textual/widgets/_switch.py
+++ b/src/textual/widgets/_switch.py
@@ -46,33 +46,51 @@ class Switch(Widget, can_focus=True):
 
     DEFAULT_CSS = """
     Switch {
-        border: tall transparent;
-        background: $boost;
+        border: tall $border-blurred;
+        background: $surface;
         height: auto;
         width: auto;
         padding: 0 2;
+        &.-on > .switch--slider {
+            color: $success;
+        }
+        & > .switch--slider {
+            background: $surface-darken-1;
+            color: $surface-lighten-2;
+        }
+        &:hover {
+            border: tall $background;
+            & > .switch--slider {
+                color: $surface-lighten-3;
+            }
+            &.-on {
+                & > .switch--slider {
+                    color: $success-lighten-1;
+                }
+            }
+        }
+        &:focus {
+            border: tall $border;
+        }
+        &:light {
+            & > .switch--slider {
+                background: $surface-lighten-2;
+                color: $surface-darken-1;
+            }
+            &.-on {
+                & > .switch--slider {
+                    color: $success-lighten-1;
+                }
+                &:hover > .switch--slider {
+                    color: $success;
+                }
+            }
+            &:hover > .switch--slider {
+                color: $surface-darken-2;
+            }
+        }
     }
 
-    Switch > .switch--slider {
-        background: $panel-darken-2;
-        color: $panel-lighten-2;
-    }
-
-    Switch:hover {
-        border: tall $background;
-    }
-
-    Switch:focus {
-        border: tall $accent;
-    }
-
-    Switch.-on {
-
-    }
-
-    Switch.-on > .switch--slider {
-        color: $success;
-    }
     """
 
     value: reactive[bool] = reactive(False, init=False)
diff --git a/src/textual/widgets/_tree.py b/src/textual/widgets/_tree.py
index 1d83e28c5e..ca0004c1fd 100644
--- a/src/textual/widgets/_tree.py
+++ b/src/textual/widgets/_tree.py
@@ -619,6 +619,19 @@ class Tree(Generic[TreeDataType], ScrollView, can_focus=True):
             }
         }
 
+        &:light {
+            /* In light mode the guides are darker*/
+            & > .tree--guides {
+                color: $surface-darken-1;
+            }
+            & > .tree--guides-hover {
+                color: $surface-darken-2;
+            }
+            & > .tree--guides-selected {
+                color: $surface-darken-2;
+            }
+        }
+
         &.-ansi {
             background: ansi_default;
             color: ansi_default;