Ensure theme variables available on initial render (#5254)

* Ensure theme variables are available immediately

* Add snapshot test ensuring theme variables are available in code

* Fix theme variables

Author: darrenburns

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Fixed
+
+- Fixed theme variables being unavailable in code until refresh_css was called https://github.com/Textualize/textual/pull/5254
+
 ## [0.86.1] - 2024-11-16
 
 ### Fixed

src/textual/app.py

@@ -636,6 +636,9 @@ def __init__(
 
         self._css_has_errors = False
 
+        self.theme_variables: dict[str, str] = {}
+        """Variables generated from the current theme."""
+
         # Note that the theme must be set *before* self.get_css_variables() is called
         # to ensure that the variables are retrieved from the currently active theme.
         self.stylesheet = Stylesheet(variables=self.get_css_variables())
@@ -765,9 +768,6 @@ 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"}:

tests/snapshot_tests/__snapshots__/test_snapshots/test_theme_variables_available_in_code.svg

@@ -2571,3 +2571,20 @@ def action_remove_foo(self) -> None:
 
     app = TabsApp()
     assert snap_compare(app, press="r")
+
+
+def test_theme_variables_available_in_code(snap_compare):
+    """Test that theme variables are available in code."""
+
+    class ThemeVariablesApp(App):
+        def compose(self) -> ComposeResult:
+            yield Label("Hello")
+
+        def on_mount(self) -> None:
+            variables = self.theme_variables
+            label = self.query_one(Label)
+            label.update(f"$text-primary = {variables['text-primary']}")
+            label.styles.background = variables["primary-muted"]
+            label.styles.color = variables["text-primary"]
+
+    assert snap_compare(ThemeVariablesApp())