Merge pull request #5462 from TomJGooding/fix-scrollbar-fix-scrollbar-background-opacity

fix(scrollbar): fix scrollbar background opacity

Author: willmcgugan

CHANGELOG.md

@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Fixed select refocusing itself too late https://github.com/Textualize/textual/pull/5420
 - Fixed Log widget not refreshing on resize https://github.com/Textualize/textual/pull/5460
 - Fixed special case with calculating the height of a container where all children have dynamic heights https://github.com/Textualize/textual/pull/5463
+- Fixed scrollbars ignoring background opacity https://github.com/Textualize/textual/issues/5458
 
 
 ## [1.0.0] - 2024-12-12

src/textual/scrollbar.py

@@ -286,6 +286,9 @@ def render(self) -> RenderableType:
         else:
             background = styles.scrollbar_background
             color = styles.scrollbar_color
+        if background.a < 1:
+            base_background, _ = self.parent._opacity_background_colors
+            background = base_background + background
         color = background + color
         scrollbar_style = Style.from_color(color.rich_color, background.rich_color)
         if self.screen.styles.scrollbar_color.a == 0:

tests/snapshot_tests/__snapshots__/test_snapshots/test_scrollbar_background_with_opacity.svg

@@ -3284,3 +3284,30 @@ def on_mount(self) -> None:
                 t1.add_row(str(number) + " " * 200)
 
     snap_compare(MyApp())
+
+
+def test_scrollbar_background_with_opacity(snap_compare):
+    """Regression test for https://github.com/Textualize/textual/issues/5458
+    The scrollbar background should match the background of the widget."""
+
+    class ScrollbarOpacityApp(App):
+        CSS = """
+        Screen {
+            align: center middle;
+        }
+
+        VerticalScroll {
+            width: 50%;
+            height: 50%;
+            background: blue 10%;
+            scrollbar-background: blue 10%;
+            scrollbar-color: cyan;
+            scrollbar-size-vertical: 10;
+        }
+        """
+
+        def compose(self) -> ComposeResult:
+            with VerticalScroll():
+                yield Static("\n".join(f"This is some text {n}" for n in range(100)))
+
+    assert snap_compare(ScrollbarOpacityApp())