Theme tweaks (#5232)

* theme tweaks

* style tweaks

* snapshots

* demo tweaks

* projects tweaks

examples/calculator.tcss

@@ -27,7 +27,7 @@ Button {
     column-span: 4;
     padding: 0 1;
     height: 100%;
-    background: $primary-lighten-2;
+    background: $panel;
     color: $text;
     content-align: center middle;
     text-align: right;

examples/code_browser.py

@@ -13,7 +13,7 @@ from rich.traceback import Traceback
 
 from textual.app import App, ComposeResult
 from textual.containers import Container, VerticalScroll
-from textual.reactive import var
+from textual.reactive import reactive, var
 from textual.widgets import DirectoryTree, Footer, Header, Static
 
 
@@ -27,6 +27,7 @@ class CodeBrowser(App):
     ]
 
     show_tree = var(True)
+    path: reactive[str | None] = reactive(None)
 
     def watch_show_tree(self, show_tree: bool) -> None:
         """Called when show_tree is modified."""
@@ -45,19 +46,32 @@ class CodeBrowser(App):
     def on_mount(self) -> None:
         self.query_one(DirectoryTree).focus()
 
+        def theme_change(_signal) -> None:
+            """Force the syntax to use a different theme."""
+            self.watch_path(self.path)
+
+        self.theme_changed_signal.subscribe(self, theme_change)
+
     def on_directory_tree_file_selected(
         self, event: DirectoryTree.FileSelected
     ) -> None:
         """Called when the user click a file in the directory tree."""
         event.stop()
+        self.path = str(event.path)
+
+    def watch_path(self, path: str | None) -> None:
+        """Called when path changes."""
         code_view = self.query_one("#code", Static)
+        if path is None:
+            code_view.update("")
+            return
         try:
             syntax = Syntax.from_path(
-                str(event.path),
+                path,
                 line_numbers=True,
                 word_wrap=False,
                 indent_guides=True,
-                theme="github-dark",
+                theme="github-dark" if self.current_theme.dark else "github-light",
             )
         except Exception:
             code_view.update(Traceback(theme="github-dark", width=None))
@@ -65,7 +79,7 @@ class CodeBrowser(App):
         else:
             code_view.update(syntax)
             self.query_one("#code-view").scroll_home(animate=False)
-            self.sub_title = str(event.path)
+            self.sub_title = path
 
     def action_toggle_files(self) -> None:
         """Called in response to key binding."""

examples/code_browser.tcss

@@ -1,5 +1,4 @@
 Screen {
-    background: $surface-darken-1;
     &:inline {
         height: 50vh;
     }
@@ -23,7 +22,7 @@ CodeBrowser.-show-tree #tree-view {
 #code-view {
     overflow: auto scroll;
     min-width: 100%;
-    hatch: right $primary;
+    hatch: right $panel;
 }
 #code {
     width: auto;

examples/dictionary.tcss

@@ -13,13 +13,13 @@ Input#dictionary-search {
 }
 
 #results-container {
-    background: $background 50%;
+    background: $surface;
     margin: 0 0 1 0;
     height: 100%;
     overflow: hidden auto;
-    border: tall $background;
+    border: tall transparent;
 }
 
 #results-container:focus {
-    border: tall $accent;
+    border: tall $border;
 }

examples/merlin.py

@@ -77,6 +77,9 @@ class Timer(Digits):
         width: auto;
         margin: 2 8;
         color: $warning;
+        &:light {
+            color: $secondary;
+        }
     }
     """
     start_time = var(0.0)
@@ -115,7 +118,7 @@ class MerlinApp(App):
     Grid {
         width: auto;
         height: auto;
-        border: thick $primary;
+        border: thick $border;
         padding: 1 2;
         grid-size: 3 3;
         grid-rows: auto;
@@ -162,6 +165,7 @@ class MerlinApp(App):
         if self.check_win():
             self.query_one("Screen").add_class("-win")
             self.query_one(Timer).running = False
+            self.notify("You win!", title="congratulations", severity="information")
 
     def on_key(self, event: events.Key) -> None:
         """Maps switches to keys, so we can use the keyboard as well."""

examples/mother.py

@@ -22,7 +22,9 @@ from textual.widgets import Footer, Header, Input, Markdown
 try:
     import llm
 except ImportError:
-    raise ImportError("install the 'llm' package or run with 'uv run mother.py'")
+    raise ImportError(
+        "install the 'llm' package or run with 'uv run mother.py'"
+    ) from None
 
 # The system prompt
 SYSTEM = """Formulate all responses as if you where the sentient AI named Mother from the Alien movies."""