docs and fixes

docs/examples/introduction/stopwatch01.py

@@ -0,0 +1,19 @@
+from textual.app import App
+from textual.widgets import Header, Footer
+
+
+class TimerApp(App):
+    def compose(self):
+        yield Header()
+        yield Footer()
+
+    def on_load(self):
+        self.bind("d", "toggle_dark", description="Dark mode")
+
+    def action_toggle_dark(self):
+        self.dark = not self.dark
+
+
+app = TimerApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/introduction/timers.css

@@ -1,11 +1,11 @@
 TimerWidget {
     layout: horizontal;
     background: $panel-darken-1;
-    border: tall $panel-darken-2;
+    
     height: 5;
     min-width: 50;
     margin: 1;
-    padding: 0 1;
+    padding: 1 1;
     transition: background 300ms linear;
 }
 
@@ -13,7 +13,6 @@ TimerWidget.started {
     text-style: bold;
     background: $success;
     color: $text-success;
-    border: tall $success-darken-2;
 }
 
 

docs/examples/introduction/timers.py

@@ -71,6 +71,7 @@ class TimerApp(App):
         """Called when the app first loads."""
         self.bind("a", "add_timer", description="Add")
         self.bind("r", "remove_timer", description="Remove")
+        self.bind("d", "toggle_dark", description="Dark mode")
 
     def compose(self) -> ComposeResult:
         """Called to ad widgets to the app."""
@@ -90,6 +91,9 @@ class TimerApp(App):
         if timers:
             timers.last().remove()
 
+    def action_toggle_dark(self) -> None:
+        self.dark = not self.dark
+
 
 app = TimerApp(css_path="timers.css")
 if __name__ == "__main__":