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 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,27 +46,40 @@ def compose(self) -> ComposeResult:
     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))
             self.sub_title = "ERROR"
         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 @@ def on_switch_changed(self, event: Switch.Changed) -> None:
         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 @@
 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."""

src/textual/command.py

@@ -467,6 +467,7 @@ class CommandList(OptionList, can_focus=False):
     CommandList > .option-list--option {
         padding: 0 2;
         color: $foreground;
+        text-style: bold;
     }
     """
 
@@ -551,21 +552,15 @@ class CommandPalette(SystemModalScreen[None]):
         }
     }
 
-    CommandPalette > .command-palette--help-text {           
-        color: auto 50%;
+    CommandPalette > .command-palette--help-text {                   
+        color: $text-muted;
         background: transparent;
-        text-style: not bold;       
-    }
-
-    CommandPalette:dark > .command-palette--highlight {
-        text-style: bold;
-        color: $warning;
+        text-style: not bold dim;       
     }
+    
     CommandPalette > .command-palette--highlight {
-        text-style: bold;
-        color: $warning-darken-2;
-
-    }
+        text-style: bold underline;
+    }   
 
     CommandPalette:nocolor > .command-palette--highlight {
         text-style: underline;
@@ -806,7 +801,9 @@ def _on_mount(self, _: Mount) -> None:
         self.app.post_message(CommandPalette.Opened())
         self._calling_screen = self.app.screen_stack[-2]
 
-        match_style = self.get_component_rich_style("command-palette--highlight")
+        match_style = self.get_component_rich_style(
+            "command-palette--highlight", partial=True
+        )
 
         assert self._calling_screen is not None
         self._providers = [

src/textual/demo/home.py

@@ -142,7 +142,7 @@ class StarCount(Vertical):
         layout: horizontal;
         background: $boost;
         padding: 0 1;
-        color: $warning;
+        color: $text-warning;
         #stars { align: center top; }
         #forks { align: right top; }
         Label { text-style: bold; }

src/textual/demo/projects.py

@@ -137,10 +137,12 @@ class Project(Vertical, can_focus=True, can_focus_children=False):
         padding: 0 1;
         border: tall transparent;
         box-sizing: border-box;
-        &:focus {
-            border: tall $accent;
-            background: $primary 40%;
-            opacity: 1.0;            
+        &:focus { 
+            border: tall $text-primary;
+            background: $primary 20%;
+            &.link {
+                color: red !important;
+            }        
         }
         #title { text-style: bold; width: 1fr; }
         #author { text-style: italic; }
@@ -152,7 +154,7 @@ class Project(Vertical, can_focus=True, can_focus_children=False):
         }
         .header { height: 1; }
         .link {
-            color: $accent;
+            color: $text-accent;
             text-style: underline;
         }
         .description { color: $text-muted; }
@@ -205,9 +207,9 @@ class ProjectsScreen(PageScreen):
             height: auto;            
             grid-gutter: 1 1;
             grid-rows: auto;           
-            keyline:thin $foreground 50%;        
+            keyline:thin $foreground 30%;        
         }              
-        Markdown { margin: 0; padding: 0 2; max-width: 100;}
+        Markdown { margin: 0; padding: 0 2; max-width: 100; background: transparent; }
     }
     """
 

src/textual/demo/widgets.py

@@ -441,6 +441,9 @@ class WidgetsScreen(PageScreen):
     CSS = """
     WidgetsScreen { 
         align-horizontal: center;
+        Markdown {
+            background: transparent;
+        }
         & > VerticalScroll {
             scrollbar-gutter: stable;
             &> * {            

src/textual/design.py

@@ -264,9 +264,16 @@ def luminosity_range(spread: float) -> Iterable[tuple[str, float]]:
         )
 
         # The scrollbar colors
-        colors["scrollbar"] = get("scrollbar", panel.hex)
-        colors["scrollbar-hover"] = get("scrollbar-hover", colors["panel-lighten-1"])
-        colors["scrollbar-active"] = get("scrollbar-active", colors["panel-lighten-2"])
+        colors["scrollbar"] = get(
+            "scrollbar",
+            (Color.parse(colors["background-darken-1"]) + primary.with_alpha(0.4)).hex,
+        )
+        colors["scrollbar-hover"] = get(
+            "scrollbar-hover",
+            (Color.parse(colors["background-darken-1"]) + primary.with_alpha(0.5)).hex,
+        )
+        # colors["scrollbar-active"] = get("scrollbar-active", colors["panel-lighten-2"])
+        colors["scrollbar-active"] = get("scrollbar-active", primary.hex)
         colors["scrollbar-background"] = get(
             "scrollbar-background", colors["background-darken-1"]
         )

src/textual/widgets/_button.py

@@ -57,7 +57,12 @@ class Button(Widget, can_focus=True):
         border-bottom: tall $surface-darken-1;
         text-align: center;
         content-align: center middle;
+        text-style: bold;
 
+        &:disabled {
+            text-style: not bold;
+        }
+        
         &:focus {
             text-style: $button-focus-text-style;
             background-tint: $foreground 5%;

src/textual/widgets/_collapsible.py

@@ -22,7 +22,6 @@ class CollapsibleTitle(Static, can_focus=True):
         height: auto;
         padding: 0 1 0 1;
         text-style: $block-cursor-blurred-text-style;
-        background: $block-cursor-blurred-background;
         color: $block-cursor-blurred-foreground;
 
         &:hover {

src/textual/widgets/_option_list.py

@@ -149,9 +149,7 @@ class OptionList(ScrollView, can_focus=True):
         border: tall transparent;
         padding: 0 1;
         background: $surface;
-        &:ansi {
-            border: tall $border-blurred;
-        }
+
         & > .option-list--option-highlighted {
             color: $block-cursor-blurred-foreground;
             background: $block-cursor-blurred-background;