Make MarkdownFence respond to app theme changes. Closes Textualize#3997

CHANGELOG.md

@@ -26,7 +26,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - `SelectionList` option IDs are usable as soon as the widget is instantiated https://github.com/Textualize/textual/issues/3903
 - Fix issue with `Strip.crop` when crop window start aligned with strip end https://github.com/Textualize/textual/pull/3998
 - Fixed Strip.crop_extend https://github.com/Textualize/textual/pull/4011
-
+- Fixed `MarkdownFence` not adapting to app theme changes https://github.com/Textualize/textual/issues/3997
 
 ## [0.47.1] - 2023-01-05
 

src/textual/widgets/_markdown.py

@@ -7,6 +7,7 @@
 from markdown_it.token import Token
 from rich import box
 from rich.style import Style
+from rich.syntax import Syntax
 from rich.table import Table
 from rich.text import Text
 from typing_extensions import TypeAlias
@@ -500,19 +501,35 @@ class MarkdownFence(MarkdownBlock):
     def __init__(self, markdown: Markdown, code: str, lexer: str) -> None:
         self.code = code
         self.lexer = lexer
+        self.theme = "solarized-dark" if self.app.dark else "solarized-light"
         super().__init__(markdown)
 
-    def compose(self) -> ComposeResult:
-        from rich.syntax import Syntax
+    def _retheme(self) -> None:
+        """Swap between a dark and light theme when the mode changes."""
+        self.theme = "solarized-dark" if self.app.dark else "solarized-light"
+        code_block = self.query_one(Static)
+        code_block.renderable = Syntax(
+            self.code,
+            lexer=self.lexer,
+            word_wrap=False,
+            indent_guides=True,
+            padding=(1, 2),
+            theme=self.theme,
+        )
 
+    def _on_mount(self, _: Mount) -> None:
+        """Watch app theme switching."""
+        self.watch(self.app, "dark", self._retheme)
+
+    def compose(self) -> ComposeResult:
         yield Static(
             Syntax(
                 self.code,
                 lexer=self.lexer,
                 word_wrap=False,
                 indent_guides=True,
                 padding=(1, 2),
-                theme="material",
+                theme=self.theme,
             ),
             expand=True,
             shrink=False,