Fixing switch styles, adding subtle hover effect to suggest which part will move

Author: darrenburns

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)

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;