Fixing additional variables not working

src/textual/app.py

@@ -1170,7 +1170,10 @@ def get_css_variables(self) -> dict[str, str]:
         # Build the Textual color system from the theme.
         # This will contain $secondary, $primary, $background, etc.
         variables = theme.to_color_system().generate()
-        return {**self.get_theme_variable_defaults(), **variables}
+        # Apply the additional variables from the theme
+        variables = {**variables, **(theme.variables)}
+        theme_variables = self.get_theme_variable_defaults()
+        return {**theme_variables, **variables}
 
     def get_theme(self, theme_name: str) -> Theme | None:
         """Get a theme by name.
@@ -1234,8 +1237,7 @@ def _watch_theme(self, theme_name: str) -> None:
 
         This method is called when the theme reactive attribute is set.
         """
-        theme = self.get_theme(theme_name)
-        assert theme is not None  # validated by _validate_theme
+        theme = self.current_theme
         dark = theme.dark
         self.ansi_color = theme_name == "textual-ansi"
         self.set_class(dark, "-dark-mode", update=False)

src/textual/css/parse.py

@@ -362,6 +362,7 @@ def substitute_references(
     """
     variables: dict[str, list[Token]] = css_variables.copy() if css_variables else {}
     iter_tokens = iter(tokens)
+    print(variables)
 
     while True:
         token = next(iter_tokens, None)

src/textual/theme.py

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from dataclasses import dataclass
+from dataclasses import dataclass, field
 from functools import partial
 from typing import Callable
 
@@ -34,7 +34,7 @@ class Theme:
     dark: bool = True
     luminosity_spread: float = 0.15
     text_alpha: float = 0.95
-    variables: dict[str, str] | None = None
+    variables: dict[str, str] = field(default_factory=dict)
 
     def to_color_system(self) -> ColorSystem:
         """

tests/snapshot_tests/test_snapshots.py

@@ -33,6 +33,7 @@
     TextArea,
 )
 from textual.widgets.text_area import BUILTIN_LANGUAGES, Selection, TextAreaTheme
+from textual.theme import Theme
 
 # These paths should be relative to THIS directory.
 WIDGET_EXAMPLES_DIR = Path("../../docs/examples/widgets")
@@ -2454,3 +2455,57 @@ def on_mount(self) -> None:
             self.theme = theme_name
 
     assert snap_compare(ThemeApp())
+
+
+def test_custom_theme_with_variables(snap_compare):
+    """Test creating and using a custom theme with variables that get overridden.
+
+    After the overrides from the theme, the background should be blue, the text should be white, the border should be yellow,
+    the style should be bold italic, and the label should be cyan.
+    """
+
+    class ThemeApp(App[None]):
+        CSS = """
+        Screen {
+            align: center middle;
+        }
+        
+        Label {
+            background: $custom-background;
+            color: $custom-text;
+            border: wide $custom-border;
+            padding: 1 2;
+            text-style: $custom-style;
+            text-align: center;
+            width: auto;
+        }
+        """
+
+        def compose(self) -> ComposeResult:
+            yield Label("Custom Theme")
+
+        def get_theme_variable_defaults(self) -> dict[str, str]:
+            """Override theme variables."""
+            return {
+                "custom-text": "cyan",
+                "custom-style": "bold italic",
+                "custom-border": "red",
+                "custom-background": "#0000ff 50%",
+            }
+
+        def on_mount(self) -> None:
+            custom_theme = Theme(
+                name="my-custom",
+                primary="magenta",
+                background="black",
+                variables={
+                    "custom-background": "#ff0000 20%",
+                    "custom-text": "white",
+                    "custom-border": "yellow",
+                    "custom-style": "bold",
+                },
+            )
+            self.register_theme(custom_theme)
+            self.theme = "my-custom"
+
+    assert snap_compare(ThemeApp())