Merge pull request #5087 from Textualize/themes

Themes and command palette improvements

Author: willmcgugan

CHANGELOG.md

@@ -13,6 +13,20 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
+- Added `App.theme` reactive attribute https://github.com/Textualize/textual/pull/5087
+- Added various starter themes https://github.com/Textualize/textual/pull/5087
+- Added "Change theme" command to command palette https://github.com/Textualize/textual/pull/5087
+- Added `variant` parameter to `Label` widget for quick access to common styles https://github.com/Textualize/textual/pull/5087
+- Added `App.get_theme` which returns a theme by name https://github.com/Textualize/textual/pull/5087
+- Added `App.register_theme` and `App.unregister_theme` https://github.com/Textualize/textual/pull/5087
+- Added `App.theme_changed_signal` https://github.com/Textualize/textual/pull/5087
+- Added `App.available_themes` property which returns a mapping of theme names to `Theme` instances https://github.com/Textualize/textual/pull/5087
+- Added `App.current_theme` property which returns the currently active theme object https://github.com/Textualize/textual/pull/5087
+- Added `App.get_theme_variable_defaults` which returns a mapping of theme variables to their default values https://github.com/Textualize/textual/pull/5087
+- Added `App.search` which allows bringing up a fuzzy search list of commands on-demand https://github.com/Textualize/textual/pull/5087
+- Added `App.search_themes` which allows bringing up a fuzzy search list of themes on-demand https://github.com/Textualize/textual/pull/5087
+- Added `textual.theme.ThemeProvider`, a command palette provider which returns all registered themes https://github.com/Textualize/textual/pull/5087
+- Added several new built-in CSS variables https://github.com/Textualize/textual/pull/5087
 - Added support for in-band terminal resize protocol https://github.com/Textualize/textual/pull/5217
 
 ### Changed
@@ -23,6 +37,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Added `textual.lazy.Reveal` https://github.com/Textualize/textual/pull/5226
 - Added `Screen.action_blur` https://github.com/Textualize/textual/pull/5226
 
+### Changed
+
+- Breaking change: Removed `App.dark` reactive attribute https://github.com/Textualize/textual/pull/5087
+- Breaking change: To improve consistency, several changes have been made to default widget CSS and the CSS variables which ship with Textual. On upgrading, your app will likely look different. All of these changes can be overidden with your own CSS. https://github.com/Textualize/textual/pull/5087
+
 ## [0.85.2] - 2024-11-02
 
 - Fixed broken focus-within https://github.com/Textualize/textual/pull/5190

Makefile

@@ -4,6 +4,10 @@ run := poetry run
 test:
 	$(run) pytest tests/ -n 16 --dist=loadgroup $(ARGS)
 
+.PHONY: testv
+testv:
+	$(run) pytest tests/ -vvv -n 16 --dist=loadgroup $(ARGS)
+
 .PHONY: test-snapshot-update
 test-snapshot-update:
 	$(run) pytest tests/ --snapshot-update -n 16 --dist=loadgroup $(ARGS)

docs/blog/posts/release0-38-0.md

@@ -58,7 +58,7 @@ If you do want to style something outside of the widget you can set `SCOPED_CSS=
 ## Light and Dark pseudo selectors
 
 We've also made a slight quality of life improvement to the CSS, by adding `:light` and `:dark` pseudo selectors.
-This allows you to change styles depending on whether you have dark mode enabled or not.
+This allows you to change styles depending on whether the app is currently using a light or dark theme.
 
 This was possible before, just a little verbose.
 Here's how you would do it in 0.37.0:

docs/css_types/color.md

@@ -17,7 +17,7 @@ A bullet point summary of the formats available follows:
  - a color description in the RGB system, [with](#rgba-description) or [without](#rgb-description) opacity (e.g., `rgb(23, 78, 200)`);
  - a color description in the HSL system, [with](#hsla-description) or [without](#hsl-description) opacity (e.g., `hsl(290, 70%, 80%)`);
 
-[Textual's default themes](../guide/design.md#theme-reference) also provide many CSS variables with colors that can be used out of the box.
+[Textual's default themes](../guide/design.md) also provide many CSS variables with colors that can be used out of the box.
 
 ### Named colors
 

docs/examples/events/on_decorator01.py

@@ -16,7 +16,9 @@ def on_button_pressed(self, event: Button.Pressed) -> None:  # (1)!
         if event.button.id == "bell":
             self.bell()
         elif event.button.has_class("toggle", "dark"):
-            self.dark = not self.dark
+            self.theme = (
+                "textual-dark" if self.theme == "textual-light" else "textual-light"
+            )
         elif event.button.id == "quit":
             self.exit()
 

docs/examples/events/on_decorator02.py

@@ -20,7 +20,9 @@ def play_bell(self):
     @on(Button.Pressed, ".toggle.dark")  # (2)!
     def toggle_dark(self):
         """Called when the 'toggle dark' button is pressed."""
-        self.dark = not self.dark
+        self.theme = (
+            "textual-dark" if self.theme == "textual-light" else "textual-light"
+        )
 
     @on(Button.Pressed, "#quit")  # (3)!
     def quit(self):

docs/examples/getting_started/console.py

@@ -10,7 +10,6 @@
 
 class ConsoleApp(App):
     def compose(self):
-        self.dark = True
         yield Static(DevConsoleHeader())
 
 

docs/examples/styles/background_tint.tcss

@@ -2,8 +2,8 @@ Vertical {
     background: $panel;
     color: auto 90%;
 }
-#tint1 { background-tint: $foreground 0%; }
-#tint2 { background-tint: $foreground 25%; }
-#tint3 { background-tint: $foreground 50%; }
-#tint4 { background-tint: $foreground 75% }
-#tint5 { background-tint: $foreground 100% }
+#tint1 { background-tint: $text 0%; }
+#tint2 { background-tint: $text 25%; }
+#tint3 { background-tint: $text 50%; }
+#tint4 { background-tint: $text 75% }
+#tint5 { background-tint: $text 100% }

docs/examples/themes/colored_text.py

@@ -0,0 +1,17 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Label
+
+COLORS = ("primary", "secondary", "accent", "warning", "error", "success")
+
+
+class ColoredText(App[None]):
+    CSS = "\n".join(f".text-{color} {{color: $text-{color};}}" for color in COLORS)
+
+    def compose(self) -> ComposeResult:
+        for color in COLORS:
+            yield Label(f"$text-{color}", classes=f"text-{color}")
+
+
+app = ColoredText()
+if __name__ == "__main__":
+    app.run()

docs/examples/themes/muted_backgrounds.py

@@ -0,0 +1,20 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Label
+
+COLORS = ("primary", "secondary", "accent", "warning", "error", "success")
+
+
+class MutedBackgrounds(App[None]):
+    CSS = "\n".join(
+        f".text-{color} {{padding: 0 1; color: $text-{color}; background: ${color}-muted;}}"
+        for color in COLORS
+    )
+
+    def compose(self) -> ComposeResult:
+        for color in COLORS:
+            yield Label(f"$text-{color} on ${color}-muted", classes=f"text-{color}")
+
+
+app = MutedBackgrounds()
+if __name__ == "__main__":
+    app.run()