markdown style tweak

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Optimized startup https://github.com/Textualize/textual/pull/5869
 - New blank visual which makes background faster to render (note this will break snapshots tests this version) https://github.com/Textualize/textual/pull/5869
 - Exposed `code_indent_guides` boolean on Markdown widget
+- Changed code fence background to use CSS background rather than its code theme
 
 ## [3.4.0] - 2025-06-14
 

docs/widget_gallery.md

@@ -162,7 +162,7 @@ Display and interact with a Markdown document (adds a table of contents and brow
 [MarkdownViewer reference](./widgets/markdown_viewer.md){ .md-button .md-button--primary }
 
 
-```{.textual path="docs/examples/widgets/markdown_viewer.py" columns="140" lines="50" press="tab,down"}
+```{.textual path="docs/examples/widgets/markdown_viewer.py" columns="120" lines="50" press="tab,down"}
 ```
 
 ## Markdown
@@ -172,7 +172,7 @@ Display a markdown document.
 [Markdown reference](./widgets/markdown.md){ .md-button .md-button--primary }
 
 
-```{.textual path="docs/examples/widgets/markdown.py" columns="140" lines="51"}
+```{.textual path="docs/examples/widgets/markdown.py" columns="120" lines="51"}
 ```
 
 ## MaskedInput

src/textual/widgets/_markdown.py

@@ -352,7 +352,7 @@ class MarkdownBlockQuote(MarkdownBlock):
     DEFAULT_CSS = """
     MarkdownBlockQuote {
         background: $boost;
-        border-left: outer $success-darken-2;
+        border-left: outer $primary 50%;
         margin: 1 0;
         padding: 0 1;
     }
@@ -555,7 +555,7 @@ class MarkdownBullet(Widget):
     DEFAULT_CSS = """
     MarkdownBullet {
         width: auto;
-        color: $success;
+        color: $text;
         text-style: bold;
         &:light {
             color: $secondary;
@@ -613,6 +613,7 @@ class MarkdownFence(MarkdownBlock):
         height: auto;
         max-height: 20;
         color: rgb(210,210,210);
+        background: $background 80%;
     }
 
     MarkdownFence > * {
@@ -630,7 +631,11 @@ class MarkdownFence(MarkdownBlock):
             else self._markdown.code_light_theme
         )
 
+    def notify_style_update(self) -> None:
+        self.call_later(self._retheme)
+
     def _block(self) -> Syntax:
+        _, background_color = self.background_colors
         return Syntax(
             self.code,
             lexer=self.lexer,
@@ -638,6 +643,7 @@ class MarkdownFence(MarkdownBlock):
             indent_guides=self._markdown.code_indent_guides,
             padding=(1, 2),
             theme=self.theme,
+            background_color=background_color.css,
         )
 
     def _on_mount(self, _: Mount) -> None: