There are a number of rules to set the colors used in Textual scrollbars. You won't typically need to do this, as the default themes have carefully chosen colors, but you can if you want to.
||Scrollbar background when the thumb is being dragged.|
||Scrollbar background when the mouse is hovering over it.|
||Scrollbar "thumb" (movable part).|
||Scrollbar thumb when it is active (being dragged).|
||Scrollbar thumb when the mouse is hovering over it.|
||The gap between the horizontal and vertical scrollbars.|
scrollbar-background: <color> [<percentage>]; scrollbar-background-active: <color> [<percentage>]; scrollbar-background-hover: <color> [<percentage>]; scrollbar-color: <color> [<percentage>]; scrollbar-color-active: <color> [<percentage>]; scrollbar-color-hover: <color> [<percentage>]; scrollbar-corner-color: <color> [<percentage>];
Visit each style's reference page to learn more about how the values are used.
This example shows two planels that contain oversized text.
The right panel sets
scrollbar-corner-color, and the left panel shows the default colors for comparison.
from textual.app import App from textual.containers import Horizontal, Container from textual.widgets import Label TEXT = """I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past, I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain. """ class ScrollbarApp(App): def compose(self): yield Horizontal( Container(Label(TEXT * 10)), Container(Label(TEXT * 10), classes="right"), ) app = ScrollbarApp(css_path="scrollbars.css")