Merge pull request #5235 from Textualize/theme-fixes

Theme fixes

Author: willmcgugan

docs/guide/design.md

@@ -138,7 +138,7 @@ For example, `$secondary-darken-1` is a slightly darkened `$secondary`, and `$er
 
 ## Light and dark themes
 
-Themes can be either "light" or "dark".
+Themes can be either *light* or *dark*.
 This setting is specified in the `Theme` constructor via the `dark` argument, and influences how Textual
 generates variables.
 Built-in widgets may also use the value of `dark` to influence their appearance.

examples/theme_sandbox.py

@@ -302,7 +302,7 @@ def action_invalid_theme(self) -> None:
         self.theme = "not-a-theme"
 
     def action_widget_search(self) -> None:
-        self.search(
+        self.search_commands(
             [
                 (
                     widget.__class__.__name__,
@@ -363,8 +363,31 @@ def compose(self) -> ComposeResult:
 
         yield Header(show_clock=True, icon="🐟")
         yield ThemeList(id="theme-list")
-        with VerticalScroll(id="widget-list") as container:
-            container.can_focus = False
+        with VerticalScroll(id="widget-list", can_focus=False) as container:
+            yield Switch()
+            yield ToggleButton(label="Toggle Button")
+            yield SelectionList[int](
+                ("Falken's Maze", 0, True),
+                ("Black Jack", 1),
+                ("Gin Rummy", 2),
+                ("Hearts", 3),
+                ("Bridge", 4),
+                ("Checkers", 5),
+                ("Chess", 6, True),
+                ("Poker", 7),
+                ("Fighter Combat", 8, True),
+            )
+            yield RadioSet(
+                "Amanda",
+                "Connor MacLeod",
+                "Duncan MacLeod",
+                "Heather MacLeod",
+                "Joe Dawson",
+                "Kurgan, [bold italic red]The[/]",
+                "Methos",
+                "Rachel Ellenstein",
+                "Ramírez",
+            )
 
             yield Select(
                 [("foo", "foo"), ("bar", "bar"), ("baz", "baz"), ("qux", "qux")]
@@ -459,36 +482,10 @@ def compose(self) -> ComposeResult:
                 "Virgon",
             )
 
-            yield Switch()
-            yield ToggleButton(label="Toggle Button")
-
-            yield SelectionList[int](
-                ("Falken's Maze", 0, True),
-                ("Black Jack", 1),
-                ("Gin Rummy", 2),
-                ("Hearts", 3),
-                ("Bridge", 4),
-                ("Checkers", 5),
-                ("Chess", 6, True),
-                ("Poker", 7),
-                ("Fighter Combat", 8, True),
-            )
-            yield RadioSet(
-                "Amanda",
-                "Connor MacLeod",
-                "Duncan MacLeod",
-                "Heather MacLeod",
-                "Joe Dawson",
-                "Kurgan, [bold italic red]The[/]",
-                "Methos",
-                "Rachel Ellenstein",
-                "Ramírez",
-            )
-
         yield Footer()
 
     def on_mount(self) -> None:
-        self.theme = "textual-ansi"
+        self.theme = "textual-light"
         text_area = self.query_one(TextArea)
         text_area.selection = Selection((0, 0), (1, 10))
 

src/textual/app.py

@@ -768,6 +768,9 @@ def __init__(
         self._css_update_count: int = 0
         """Incremented when CSS is invalidated."""
 
+        self.theme_variables: dict[str, str] = {}
+        """Variables generated from the current theme."""
+
         if self.ENABLE_COMMAND_PALETTE:
             for _key, binding in self._bindings:
                 if binding.action in {"command_palette", "app.command_palette"}:
@@ -1180,7 +1183,10 @@ def get_css_variables(self) -> dict[str, str]:
         # Apply the additional variables from the theme
         variables = {**variables, **(theme.variables)}
         theme_variables = self.get_theme_variable_defaults()
-        return {**theme_variables, **variables}
+
+        combined_variables = {**theme_variables, **variables}
+        self.theme_variables = combined_variables
+        return combined_variables
 
     def get_theme(self, theme_name: str) -> Theme | None:
         """Get a theme by name.
@@ -1662,7 +1668,7 @@ def deliver_screenshot(
             name="screenshot",
         )
 
-    def search(
+    def search_commands(
         self,
         commands: Sequence[CommandListItem],
         placeholder: str = "Search for commands…",
@@ -1671,6 +1677,7 @@ def search(
 
         Args:
             commands: A list of SimpleCommand instances.
+            placeholder: Placeholder text for the search field.
 
         Returns:
             AwaitMount: An awaitable that resolves when the commands are shown.

src/textual/command.py

@@ -570,7 +570,7 @@ class CommandPalette(SystemModalScreen[None]):
         margin-top: 3; 
         height: 100%;
         visibility: hidden;
-        background: $panel-darken-1;
+        background: $surface;
     }
 
     CommandPalette #--input {

src/textual/drivers/linux_driver.py

@@ -267,8 +267,6 @@ def on_terminal_resize(signum, stack) -> None:
         self.write("\x1b[?25l")  # Hide cursor
         self.write("\x1b[?1004h")  # Enable FocusIn/FocusOut.
         self.write("\x1b[>1u")  # https://sw.kovidgoyal.net/kitty/keyboard-protocol/
-        # Disambiguate escape codes https://sw.kovidgoyal.net/kitty/keyboard-protocol/#progressive-enhancement
-        self.write("\x1b[=1;u")
 
         self.flush()
         self._key_thread = Thread(target=self._run_input_thread)

src/textual/theme.py

@@ -72,7 +72,6 @@ def to_color_system(self) -> ColorSystem:
         error="#ba3c5b",
         success="#4EBF71",
         foreground="#e0e0e0",
-        dark=True,
     ),
     "textual-light": Theme(
         name="textual-light",
@@ -82,7 +81,13 @@ def to_color_system(self) -> ColorSystem:
         warning="#ffa62b",
         error="#ba3c5b",
         success="#4EBF71",
+        surface="#D8D8D8",
+        panel="#D0D0D0",
+        background="#E0E0E0",
         dark=False,
+        variables={
+            "footer-key-foreground": "#0178D4",
+        },
     ),
     "nord": Theme(
         name="nord",
@@ -96,7 +101,6 @@ def to_color_system(self) -> ColorSystem:
         error="#BF616A",
         surface="#3B4252",
         panel="#434C5E",
-        dark=True,
         variables={
             "block-cursor-background": "#88C0D0",
             "block-cursor-foreground": "#2E3440",
@@ -119,7 +123,6 @@ def to_color_system(self) -> ColorSystem:
         background="#282828",
         surface="#3c3836",
         panel="#504945",
-        dark=True,
         variables={
             "block-cursor-foreground": "#fbf1c7",
             "input-selection-background": "#689d6a40",
@@ -138,7 +141,6 @@ def to_color_system(self) -> ColorSystem:
         background="#181825",
         surface="#313244",
         panel="#45475a",
-        dark=True,
         variables={
             "input-cursor-foreground": "#11111b",
             "input-cursor-background": "#f5e0dc",
@@ -188,7 +190,6 @@ def to_color_system(self) -> ColorSystem:
         surface="#2B2E3B",
         panel="#313442",
         foreground="#F8F8F2",
-        dark=True,
         variables={
             "button-color-foreground": "#282A36",
         },
@@ -205,7 +206,6 @@ def to_color_system(self) -> ColorSystem:
         background="#1A1B26",  # Background
         surface="#24283B",  # Surface
         panel="#414868",  # Panel
-        dark=True,
         variables={
             "button-color-foreground": "#24283B",
         },
@@ -222,7 +222,6 @@ def to_color_system(self) -> ColorSystem:
         background="#272822",
         surface="#2e2e2e",
         panel="#3E3D32",
-        dark=True,
         variables={
             "foreground-muted": "#797979",
             "input-selection-background": "#575b6190",
@@ -241,7 +240,6 @@ def to_color_system(self) -> ColorSystem:
         surface="#1C1B1A",  # base.950
         panel="#282726",  # base.900
         foreground="#FFFCF0",  # base.paper
-        dark=True,
         variables={
             "input-cursor-foreground": "#5E409D",
             "input-cursor-background": "#FFFCF0",

src/textual/widgets/_data_table.py

@@ -360,7 +360,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
         }
 
         & > .datatable--fixed {
-            background: $secondary 50%;
+            background: $secondary-muted;
             color: $foreground;
         }
 

src/textual/widgets/_option_list.py

@@ -146,10 +146,9 @@ class OptionList(ScrollView, can_focus=True):
         max-height: 100%;
         color: $foreground;
         overflow-x: hidden;
-        border: tall transparent;
+        border: tall $border-blurred;
         padding: 0 1;
         background: $surface;
-
         & > .option-list--option-highlighted {
             color: $block-cursor-blurred-foreground;
             background: $block-cursor-blurred-background;

src/textual/widgets/_radio_set.py

@@ -39,7 +39,7 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
             padding: 0;
 
             & > .toggle--button {
-                color: $surface;
+                color: $panel-darken-2;
                 background: $panel;
             }
 
@@ -49,7 +49,7 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
         }
 
         & > RadioButton.-on .toggle--button {
-            color: $success;
+            color: $text-success;
         }
 
         &:focus {
@@ -58,17 +58,6 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
             */
             border: tall $border;
             background-tint: $foreground 5%;
-
-            & > RadioButton {
-                & > .toggle--button {
-                    color: $surface;
-                    background: $panel-lighten-1;
-                }
-                &.-on > .toggle--button {
-                    color: $success;
-                }
-            }
-
             & > RadioButton.-selected {
                 color: $block-cursor-foreground;
                 text-style: $block-cursor-text-style;

src/textual/widgets/_select.py

@@ -94,7 +94,7 @@ class SelectCurrent(Horizontal):
 
     DEFAULT_CSS = """
     SelectCurrent {
-        border: tall transparent;
+        border: tall $border-blurred;
         color: $foreground;
         background: $surface;
         width: 1fr;