diff --git a/CHANGELOG.md b/CHANGELOG.md index 44bc3e81ba..183d8dddf4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/textual/scrollbar.py b/src/textual/scrollbar.py index a9e1bddcb4..6602d9cba3 100644 --- a/src/textual/scrollbar.py +++ b/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: diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_scrollbar_background_with_opacity.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_scrollbar_background_with_opacity.svg new file mode 100644 index 0000000000..af3a2d58f3 --- /dev/null +++ b/tests/snapshot_tests/__snapshots__/test_snapshots/test_scrollbar_background_with_opacity.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ScrollbarOpacityApp + + + + + + + + + + + + + + + +This is some text 0 +This is some text 1▄▄▄▄▄▄▄▄▄▄ +This is some text 2 +This is some text 3 +This is some text 4 +This is some text 5 +This is some text 6 +This is some text 7 +This is some text 8 +This is some text 9 +This is some text 10 +This is some text 11 + + + + + + + + + diff --git a/tests/snapshot_tests/test_snapshots.py b/tests/snapshot_tests/test_snapshots.py index 693c58693c..878da6a45d 100644 --- a/tests/snapshot_tests/test_snapshots.py +++ b/tests/snapshot_tests/test_snapshots.py @@ -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())